-1

I am trying to edit and change the internal page transitions in Onsen ui. I have read their documentation, and they said to check the animation files in the views folder in github here:

https://github.com/OnsenUI/OnsenUI/tree/master/framework/views

So, i checked these animations, but i don't see where i am supposed to edit them in the onsen ui folder itself. what file am i supposed to change?

I am trying to make that the page transition in android will be more subtle than what it is currently now.

Any help would be appreciated.

Thanks, Shaul.

Shaul Hadar
  • 51
  • 2

1 Answers1

0

I'm afraid that I'm not sure about what you want to realize. Do you change transition animation? It's basically difficult, but possible. Onsen UI attach animation css byJavaScript. Please look onsen ui.js. Onsen UI attach css as following:

Android Sliding Animation (default animation)

// Onsen UI 1.1.4 line 6993
(function() {
  'use strict;';

 //Slide Animation for Android
  module.factory('SimpleSlideTransitionAnimator', ['NavigatorTransitionAnimator', function(NavigatorTransitionAnimator) {

  ...

  timing: 'cubic-bezier(.1, .7, .4, 1)',
  duration: 0.3, 
  blackMaskOpacity: 0.4,

  ..

      animit(enterPage.element[0])
        .queue({
          css: {
            transform: 'translate3D(100%, 0, 0)',
          },
          duration: 0
        })

iOS Sliding Animation (default animation)

// Onsen UI 1.1.4  line 4562
(function() {
'use strict;';



 module.factory('IOSSlideTransitionAnimator', ['NavigatorTransitionAnimator', 'PageView', function(NavigatorTransitionAnimator, PageView) {

So the way to change transition animation is editing here. The reason Onsen UI attach style as above is simple faster than attaching css classes. I asked Onsen UI Team.

Ataru
  • 544
  • 4
  • 7
  • Hi Ataru, thanks for that. I have tried to add the "IOSSlideTransitionAnimator" to a link, and it didn't work. I also tried to copy the code from the "IOSSlideTransitionAnimator" in onsenui.js to the simpletransitionanimator code, and it didn't work...Is there any chance you can explain this to me a bit further? thanks man.. – Shaul Hadar Oct 10 '14 at 05:27
  • I am trying to change all the page animations to show in ios style on an android application. In the ios style, the navigator has a little fade animation, and it looks great, i want to put that on the android version... something like the framework7 default animation... – Shaul Hadar Oct 10 '14 at 05:29