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

【问题标题】：Angular animate help - slide and then hide角度动画帮助 - 滑动然后隐藏
【发布时间】：2014-07-06 06:12:42
【问题描述】：

我正在尝试实现一个非常简单的效果（我想）。当用户单击按钮时，我需要从“视口”右侧将 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。谁能指出我正确的方向？？？

谢谢！

【问题讨论】：

好像你正在使用css3。如果是，则使用其动画而不是角度。然后在角度你只需要在点击时切换类
嗯，你能举个例子吗，我不确定你想解释什么。有没有比使用 css3 转换更好的方法？
此链接可能对您有所帮助。 forums.asp.net/t/…

标签： css angularjs ng-animate

【解决方案1】：

您可以尝试css keyframes，这样我们就有两个以上的州。在此示例中，每个动画有 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

【讨论】：