在angularjs中通过页面导航时添加翻页动画

Question

我在导航到聊天页面时应用了翻页动画，但问题在于我的页面先翻页，然后该页面上呈现的文字翻转。因此，我该怎么做同时翻转文字和页面？

HTML

<div ui-sref="chat" class="title"> 
    <a href="#/app/chat"> 
     <img class = "title-image" src="img/Chat@1x.png"></img> 
      <p class="imgtext" style="color: rgb(102, 0, 0)">Chat</p> 
    </a><br> 
    </div>' 

CHAT.HTML

<ion-view view-title="Chat" id="animation"> 
<ion-header-bar > 
<a onclick="history.back()" > Back </a> 
<h1 class="title">Chat</h1> 
</ion-header-bar> 
    <ion-content> 
    <div > 
    </div> 
    </ion-content> 
</ion-view>` 

CSS

@keyframes example { 

    to  { transform: rotateY(180deg);animation-timing-function: ease-out; } 
} 
#animation{ 
    animation-name: example; 
    animation-duration: 1s; 
perspective: 1000px; 
} 

Answer 1

有了你CSS，你要运行动画bevore新的页面加载连。您必须在页面的实际更改上触发带有角度/离子的动画。

也许这篇文章可以帮助：

http://gonehybrid.com/how-to-animate-your-ionic-app-with-animate-css-and-nganimate/

ngAnimate是你正在寻找的东西。

Answer 2

如果你想使用FLIP作为过渡动画，那么最好的解决方案是使用这个非常流畅地处理它的插件。

https://github.com/shprink/ionic-native-transitions

您可以把同样的翻动过渡的所有网页，或者你可以控制它的特定页面

EG。

$ionicNativeTransitions.stateGo('yourState', {}, {}, { 
    "type": "flip", 
    "direction": "right", // 'left|right|up|down', default 'left' (which is like 'next') 
    "duration": 1500, // in milliseconds (ms), default 400 
});