Css 角度动画帮助-滑动然后隐藏

我试图达到一个非常简单的效果（我想）。当用户单击按钮时，我需要将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时，我想将其滑回

右侧：-200px

，然后在动画完成后，我想在该div上显示：无

我已经看了一些ngAnimate教程，但是我找不到任何关于“之前/之后”动画场景的内容，在该场景中，我需要在动画制作之前/之后显示\隐藏div。 谁能给我指一下正确的方向吗

谢谢

您可以尝试使我们有两个以上的州。在本例中，每个动画有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;
  }
}

---

您似乎正在使用css3。如果是，则使用其动画，而不是角度。然后，在angular中，你只需要在clickum上切换gal类，你能提供一个例子吗，我不确定你想解释什么。有没有比使用css3转换更好的方法呢。