Posts made by DirtyRed5789

Little update - i was seeing a flicker happen during PAGE PUSH when i was emulating IOS devices with the drop animation. Removing the

.wait(0.2)

solved it for now…

push: function(enterPage, leavePage, callback) {
	var mask = this.backgroundMask.remove();
	leavePage.element[0].parentNode.insertBefore(mask[0], leavePage.element[0]);

    var maskClear = animit(mask[0])
      .wait(0.6)
      .queue(function(done) {
        mask.remove();
        done();
      });

    animit.runAll(
    	maskClear,

		animit(enterPage.element[0])
		.queue({
			css: {
				transform: 'translate3D(0, -100%, 0)',
			},
			duration: 0
		})
		.queue({
			css: {
				transform: 'translate3D(0, 0, 0)',
			},
			duration: 0.4,
			timing: 'cubic-bezier(.47,0,.47,1)'
		})
		// .wait(0.2) -> causes flicker sometimes
		.resetStyle()
		.queue(function(done) {
			callback();
			done();
		}),

		// dont move leaving page
		animit(leavePage.element[0])
    );
},

here is my custom drop if anyone else wants to use it!

(function() {
	'use strict;';

	var module = angular.module('onsen');

	module.factory('customDropAnimation', function(NavigatorTransitionAnimator) {

		var customDropAnimation = NavigatorTransitionAnimator.extend({

			backgroundMask : angular.element(
				'<div style="position: absolute; width: 100%;' +
				'height: 100%; background-color: #ffffff;"></div>'
			),

			push: function(enterPage, leavePage, callback) {
				var mask = this.backgroundMask.remove();
				leavePage.element[0].parentNode.insertBefore(mask[0], leavePage.element[0]);

		        var maskClear = animit(mask[0])
		          .wait(0.6)
		          .queue(function(done) {
		            mask.remove();
		            done();
		          });

		        animit.runAll(
		        	maskClear,

					animit(enterPage.element[0])
					.queue({
						css: {
							transform: 'translate3D(0, -100%, 0)',
						},
						duration: 0
					})
					.queue({
						css: {
							transform: 'translate3D(0, 0, 0)',
						},
						duration: 0.4,
						timing: 'cubic-bezier(.1, .7, .1, 1)'
					})
					.wait(0.2)
					.resetStyle()
					.queue(function(done) {
						callback();
						done();
					}),

					// dont move leaving page
					animit(leavePage.element[0])
		        );
			},

			pop: function(enterPage, leavePage, callback) {
		        var mask = this.backgroundMask.remove();
		        enterPage.element[0].parentNode.insertBefore(mask[0], enterPage.element[0]);

		        animit.runAll(

		          animit(mask[0])
		            .wait(0.4)
		            .queue(function(done) {
		              mask.remove();
		              done();
		            }),

		          // dont move entering page
		          animit(enterPage.element[0]),

		          animit(leavePage.element[0])
		            .queue({
		              css: {
		                transform: 'translate3D(0, 0, 0)'
		              },
		              duration: 0
		            })
		            .queue({
		              css: {
		                transform: 'translate3D(0, -100%, 0)'
		              },
		              duration: 0.4,
		              timing: 'cubic-bezier(.1, .7, .1, 1)'
		            })
		            .wait(0.2)
					.resetStyle()
					.queue(function(done) {
						callback();
						done();
					})
		            
		        );
			}
		});

		return customDropAnimation;
	});

})();

no clue how to create custom animations - you mention it here:

https://onsen.io/guide/overview.html#Transitionanimation

but when i go to look at the code i have zero idea of how to first NAME my custom animation or link it to the ONSEN js calls?

how does

module.factory('FadeTransitionAnimator', ['NavigatorTransitionAnimator', function(NavigatorTransitionAnimator) {})

translate into a call of:

pushPage('page2.html', {animation: 'fade'})

furthermore, i think alot of people would like a DROP of FALL animation. Exactly like LIFT - but it drops from the top of the viewport rather than from the bottom.

if you can provide a basic COMPLETE example of how to accomplish this that is TESTED and working, i can go an implement it.

my stats:
cordova v6.0.0
OnsenIO v1.3.14

THANK YOU VERY MUCH

-Dan