css - Angular animate帮助——滑动然后隐藏

Question

我正在尝试实现一个非常简单的效果(我认为)。当用户单击一个按钮时，我需要将一个 div 从“视口(viewport)”的右侧滑入可视页面。 目前我的“幻灯片”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 keyframes这样我们就有了 2 个以上的状态。在此示例中，每个动画有 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;
  }
}

DEMO