2016-03-23 8 views
0

角度が新しく、呼び出されたときにビューに適用するアニメーションを含むCSSスタイルシートがあります。私はオンラインで検索しようとしましたが、私はその情報を理解していません。ビューが呼び出されたときに角度表示にCSSアニメーションを適用する方法

マイCSS:

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

@-webkit-keyframes fadeInLeft { 
    from { 
    opacity: 0; 
    -webkit-transform: translate3d(-2000px, 0, 0); 
    transform: translate3d(-2000px, 0, 0); 
    } 

    to { 
    opacity: 1; 
    -webkit-transform: none; 
    transform: none; 
    } 
} 

@keyframes fadeInLeft { 
    from { 
    opacity: 0; 
    -webkit-transform: translate3d(-2000px, 0, 0); 
    transform: translate3d(-2000px, 0, 0); 
    } 

    to { 
    opacity: 1; 
    -webkit-transform: none; 
    transform: none; 
    } 
} 

.fadeInLeft{ 
    -webkit-animation-name: fadeInLeft; 
    animation-name: fadeInLeft; 
} 

私の最初のビュー(最初にロードされます1):

<body id="login"> 
    <div> 
     <div id="container" class="container-fluid">    
      @RenderBody() 
     </div> 
    </div>  
</body> 

マイ部分図:

<div class="animated fadeInLeft"> 
    <h1 class="large">Welcome.</h1> 
</div> 

ページがどこそこにロードされています私の部分的な見方はrenderbody()です。

最初のビューから呼び出されたときにfadeInLeftアニメーションを配置したいと思います。

私は私の質問がはっきりしていることを願っています。私はAngularには本当に新しく、通常のHTMLでCSSアニメーションを扱うことに慣れていました。

答えて

1

ngAnimate moduleをお勧めします。 次のようなCSSを書く:

.animated .ng-enter {animation: fadeInLeft 1s both ease-in;} 
関連する問題