Slide up animation?

[Guest]

Hey all. I’m trying to figure out if Onsen React supports a slide up animation for modal pages, like what iOS gives you, where a View will slide up from bottom to top and fill the screen.

Is that currently possible and I just missed it in the docs? If it isn’t currently possible, would it be hard to add?

Thanks,

Scott

[munsterlander]

@sherscher Although the docs say there are multiple animators for modal in React ( @Fran-Diox there is an error in the props section of the docs for react modal - missing prop name animation), I only know of fade and none. They are set via:

animation={'fade'}

You may however be able to write your own with info from here:

https://community.onsen.io/topic/702/question-how-to-do-a-custom-page-transition-animation-the-right-way/4

[Guest]

Thanks so much for that! I’ve successfully got the lift animation from ons-navigator to work for an ons-modal page. Looks very similar to native iOS.

Only thing is, I’m seeing this warning show up in the console when I show my modal page:

warning.js?8ac8:36 Warning: Failed prop type: Invalid prop animation of value lift supplied to Modal, expected one of [“none”,“fade”].

I think the problem is that when I register my new animation like this:

ons.ModalElement.registerAnimator( "lift", Animations.LiftModalAnimator );

the property validation logic isn’t aware that I’ve registered a new animation. Small issue, but any chance that could be fixed in an upcoming release?

And thanks again…only took about 30 minutes to figure out how the whole thing worked and to plumb in a new animation. That’s pretty great.

Take care,

Scott

[munsterlander]

@sherscher Would you mind sharing your animator code so maybe others could use it or it could be integrated?

Thanks and glad you got it working! I agree on the error. :+1:

[Guest]

@munsterlander Oh sure. I just took it from from the navigator code and massaged it to work with the Modal element. Nothing clever on my part.

Here it is:

/*
Copyright 2013-2015 ASIAL CORPORATION

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

*/

import ons from 'onsenui';

/**
 * iOS style animator for modal.
 */

export default class LiftModalAnimator extends ons.ModalElement.ModalAnimator
{
 constructor(options) {
    options.duration = options.duration || '0.4';
    options.timing = options.timing || 'cubic-bezier( .1, .7, .1, 1)';
    options.delay = options.delay || 0;

    super(options);
  }

  /**
   * @param {HTMLElement} modal
   * @param {Function} callback
   */
  show(modal, callback) {
    callback = callback ? callback : function() {};

    animit.runAll(

      animit(modal)
        .saveStyle()
        .queue({
          css: {
            transform: 'translate3D(0, 100%, 0)',
          },
          duration: 0
        })
        .wait(this.delay)
        .queue({
          css: {
            transform: 'translate3D(0, 0, 0)',
          },
          duration: this.duration,
          timing: this.timing
        })
        .restoreStyle()
        .queue(function(done) {
          callback();
          done();
        }),
    );
  }

  /**
   * @param {HTMLElement} modal
   * @param {Function} callback
   */
  hide(modal, callback) {
    callback = callback ? callback : function() {};

    animit.runAll(

     animit(modal)
        .saveStyle()
        .queue({
          css: {
            transform: 'translate3D(0, 0, 0)'
          },
          duration: 0
        })
        .wait(this.delay)
        .queue({
          css: {
            transform: 'translate3D(0, 100%, 0)'
          },
          duration: this.duration,
          timing: this.timing
        })
        .restoreStyle()
        .queue( function( done )
        {
          callback();
          done();
        })
    );
  }
}

And to load it, I just called registerAnimator near the beginning of my app, like this:

ons.ModalElement.registerAnimator( "lift", Animations.LiftModalAnimator );

Would really like it if the Onsen team would integrate this into the main codebase.

Scott

[Guest]

Actually. should get rid of the animit.runAll() call as the modal version is only animating one thing.

[Fran Diox]

@sherscher Do you want to make a PR with this? You can just check how the fade animator is implemented.

[Guest]

@Fran-Diox Sure! Is there any documentation on how to do PRs? I’m not that familiar with git, but if there’s a guide I can look at, I’ll figure it out.

[Fran Diox]

@sherscher Yeah, maybe our Contributing guide can be useful :)

[Guest]

Yep! Very useful. I’ll do a PR this week when I get a spare minute.