吳進入和離開不工作時，應用到自定義CSS類

我正在與ngAnimate顯示動畫在我的角應用程序的屏幕轉換。我們正在使用ui路由器。吳進入和離開不工作時，應用到自定義CSS類

我想要的是在用戶登錄成功後，登錄屏幕向上滑出屏幕以顯示下一個屏幕。我如何才能將.ng-leave類應用於登錄屏幕？

這裏是有用的代碼到目前爲止我有：

登錄-directive.html：

<div class="login-slide" id="login-slide"> 
<div class="viewport-1"> 
    <header></header> 
    <background></background> 
    <login-form callLogin="login(username, password)"></login-form> 
    <version-footer></version-footer> 
</div>

styles.css的：

@keyframes slideOutUp { 
    0% { 
     transform: translate(0px, 400px); 
    } 

    100% { 
     transform: translate(0, -600px); 
    }  
    } 

    .login-slide.ng-leave { 
    -webkit-animation: slideOutUp 3s ease; 
    -moz-animation: slideOutUp 3s ease; 
    -o-animation: slideOutUp 3s ease; 
    animation: slideOutUp 3s ease; 
    } 

    #login-slide.ng-leave { 
    -webkit-animation: slideOutUp 3s ease; 
    -moz-animation: slideOutUp 3s ease; 
    -o-animation: slideOutUp 3s ease; 
    animation: slideOutUp 3s ease; 
    }

從我的一切已經看到了，這應該足以讓登錄幻燈片類在登錄完成時「滑」掉， e登錄屏幕將在那時離開DOM。

我也非常樂意使用ng-class，ng-if或任何其他指令的組合，如果有幫助的話。

謝謝！

來源

2016-08-23 curran

有兩件事情：

1）你必須使用某種類型的角度指令你想動畫的元素。在這種情況下，看起來像ng-view將是您使用ui-router以來的最佳選擇。 Here's a good example.

2）.ng-leave是動畫的開始的元素的狀態。您還需要完成狀態：.ng-leave-active。（也在上面的例子中）

希望有幫助。

來源

2016-08-27 18:24:04

吳進入和離開不工作時，應用到自定義CSS類

回答

相關問題