anglejsのページをナビゲートするときにフリップアニメーションを追加する

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

あなたとあなたが新しいページbevoreアニメーションを実行しようとしているCSSにもロードされます。 Pageの実際の変更については、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 
});