吴进入和离开不工作时，应用到自定义CSS类

Question

我正在与ngAnimate显示动画在我的角应用程序的屏幕转换。我们正在使用ui路由器。

我想要的是在用户登录成功后，登录屏幕向上滑出屏幕以显示下一个屏幕。我如何才能将.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或任何其他指令的组合，如果有帮助的话。

谢谢！

Answer 1

有两件事情：

1）你必须使用某种类型的角度指令你想动画的元素。在这种情况下，看起来像ng-view将是您使用ui-router以来的最佳选择。 Here's a good example.

2）.ng-leave是动画的开始的元素的状态。您还需要完成状态：.ng-leave-active。 （也在上面的例子中）

希望有帮助。