Angular动画帮助-滑动，然后隐藏

Question

我想实现一个非常简单的效果(我认为)。当用户单击按钮时，我需要从"viewport"的右侧滑动一个div到可查看的页面。现在，我让幻灯片div的css看起来像这样:

.slider {
    postion: absolute;
    right: -200;
    display: none
}

一旦用户点击一个按钮，div需要显示，然后移动到左边，即

transform: translate(-200px, 0); 

在动画结束时div的结束状态应该像这样

.slider.after-animate {
    postion: absolute;
    right: 0;
    display: block;
}

然后当用户'关闭'div时，我想将其滑动回right: -200px，然后在动画完成后，我想在该div上添加display:none

我看了几个ngAnimate教程，但没有什么我能找到交易与"之前/之后"的动画场景，我需要显示隐藏div之前/之后得到动画。谁能告诉我正确的方向????

谢谢!

Answer 1

你可以尝试css关键帧，这样我们就有了两个以上的状态。在这个例子中，每个动画有3种状态。

.slider 
{
  position:absolute;
  right:0px;
  width:200px;
  height:200px;
  border:1px solid red;
  background-color:red;
}
//angular animate automatically adds ng-hide-add when starting to add ng-hide class
.slider.ng-hide-add{
  -webkit-animation: remove_sequence 2s linear ;
  animation:remove_sequence 2s linear;
  display:block!important;
}
//angular animate automatically adds ng-hide-add when starting to remove ng-hide class
.slider.ng-hide-remove{
  -webkit-animation: enter_sequence 2s linear ;
  animation:enter_sequence 2s linear;
  display:block!important;
}
@-webkit-keyframes enter_sequence {
  0% { display:block; 
    right:-200px;
  }
  10% { right:-200px; }
  100% {right:0px;}
}
@keyframes enter_sequence {
  0% { display:block; 
    right:-200px;
  }
  10% { right:-200px; }
  100% {right:0px;}
}
@-webkit-keyframes remove_sequence {
  0% { right:0px; }
  90% { right:-200px; }
  100% {
    right:-200px;
    display:none;
  }
}
@keyframes remove_sequence {
  0% { right:0px; }
  90% { right:-200px; }
  100% {
    right:-200px;
    display:none;
  }
}

演示