在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 
});