Monaca Onsen UI Discord Chat Github Repo

Custom Navigation Animation (fall/drop)



  • 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



  • @DirtyRed5789 Dan, check out this thread for more info: http://stackoverflow.com/questions/29115915/how-to-change-slide-direction-for-resettopage/33349225#33349225

    Specifically, copying @Fran-Diox’s post info:

    Basically, you can create a new animator and define it as you need. This is the basic example in OnsenUI repository: https://github.com/OnsenUI/OnsenUI/blob/1.3.14/framework/views/simpleSlideTransitionAnimator.js

    As you can see there, two functions are defined: push and pop animations. resetToPage() uses the “push” animation like pushPage() does, not like popPage(). However, if you just want to invert that, you can create a new animator and define its “push” function exactly the same as the previous “pop” function. You have a quick example here:

    http://codepen.io/frankdiox/pen/azQMZE

    If you change the parameters of the transform functions you will get a different behavior, so you can adapt it as you want. Hope it helps!

    If you need more help than what those examples show, let me know and I can see what I can do.


  • Onsen UI

    @DirtyRed5789

    In the link that @munsterlander posted this is the code that is registering a name for the animator:

    angular.module('onsen').run(function(NavigatorView, reversedSlide) {
      NavigatorView.registerTransitionAnimator('foo', new reversedSlide())
    });
    

    So you can do { animation: 'foo' } or { animation: new reversedSlide() }.
    I agree this should be documented better. We will try to cover this when writing the final docs for Onsen 2.0. Perhaps meanwhile we could write a blog post about it :)

    By the way, @munsterlander , I just edited your post to fix a broken link :sweat_smile: I also updated it on SOF.



  • @Fran-Diox Thank you thank you!



  • This post is deleted!


  • This post is deleted!


  • 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;
    	});
    
    })();
    

  • Onsen UI

    @DirtyRed5789 Thanks for sharing :)



  • Thanks i’ll check to my apps. ;)



  • Pretty cool! I just really like how extensible Onsen is!



  • 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])
        );
    },