在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>'

聊天.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，您将在新页面加载之前运行动画。您必须在页面的实际更改上使用 Angular/Ionic 触发动画。

也许这篇文章有帮助：

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

您可以为所有页​​面设置相同的翻转过渡，也可以为特定页面控制它

例如。

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