如何將css動畫應用於視角調用時的角度視圖

我是新來的角度，我有一個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; 
}

我的第一個觀點（這是首先加載一個）：

<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動畫。

來源

2016-03-23 MJH

我會推薦使用ngAnimate module。然後寫你的CSS像 -

.animated .ng-enter {animation: fadeInLeft 1s both ease-in;}

來源

2016-03-24 00:35:32

如何將css動畫應用於視角調用時的角度視圖

回答

相關問題