防止元素在关键帧动画后返回原始位置答案

【问题标题】：Prevent element from returning to original position after keyframe animation防止元素在关键帧动画后返回原始位置
【发布时间】：2015-01-21 23:37:37
【问题描述】：

我正在我的 Angular 应用程序中试用 Dan Eden 的 animation.css。

我有一个自定义指令，它使用 Angular 的 $animate 服务将 CSS 类添加到我的元素。

例子：

CSS

.bounce-add.bounce-add-active {
    -webkit-animation: bounceOutLeft 2.5s;
    animation: bounceOutLeft 2.5s;
}

HTML：

  <div my-directive="action"/>

myMod.directive("myDirective", function ($animate) {

var linker = function (scope, element, attrs) {

    scope.$watch('myDirective', function (value, oldValue) {
            // if( value == doBounce ) 
            $animate.addClass(element, 'bounce').then(function () {
      });
}

return {
    link: linker,
    scope: {
        'myDirective': '=',
    },
  };
});

这里会出现弹跳左侧动画，但我的元素随后会返回到它的原始位置。

我尝试了动画填充模式：没有运气的转发。我还尝试添加一个额外的 CSS 类，因为 Angular 在动画完成后删除了该类，所以我的 html 中有 .bounce.bounce-add.bounce-add-active 和 class="bounce" 而不是 .bounce-add.bounce-add-active。

在使用包含关键帧动画的 CSS 样式（使用 $animate 服务的 addClass）后，有没有办法将元素保持在最终位置？

Here is the Plunker example.

【问题讨论】：

AngularJS 版本？我进行了测试，animation-fill-mode: forwards; 工作正常。但是你真的希望你的元素保持在它的最终状态吗？它会向左移动 2000 像素。您希望它在外面可见还是只想隐藏它？
Angular 版本是 1.3。是的，我希望它留在那里，然后我将通过回调从该点执行另一个动画。
我已经编辑了我的问题以包含一个 Plunker 示例。

标签： angularjs animation addclass css-animations

【解决方案1】：

将动画移动到您正在添加的类并使用animation-fill-mode: forwards;：

.bounce {
  -webkit-animation: bounceOutRight 2.5s;
  -moz-webkit-animation: bounceOutRight 2.5s;
  animation: bounceOutRight 2.5s;

  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

演示： http://plnkr.co/edit/j8MtQvvF7cBtTLwE2sFc?p=preview

【讨论】：

哇——我试过这个，但把动画填充模式的放在动画之前，这不起作用。谢谢！