在我的情况下如何在 CSS 中应用动画？答案

【问题标题】：How to apply animation in CSS in my case?在我的情况下如何在 CSS 中应用动画？
【发布时间】：2014-06-06 09:49:12
【问题描述】：

我正在尝试分配类以根据变量执行动画。

我有类似的东西

//animationOn is default to false.
<div ng-click="animationOn = !animationOn">
  <div ng-class="(animationOn ? 'moveRight' : 'moveLeft')">
      contents..
  </div>
</div>

CSS

  .moveRight{
        -webkit-animation: moveRightAni 1s;
        animation:moveRightAni 1s;   
    }

    @-webkit-keyframes moveRightAni{
        from {width: 100px;}
        to   {width: 300px;}
    }

    .moveLeft{
        -webkit-animation: moveLeftAni 1s;
        animation:moveLeftAni 1s;   
    }

    @-webkit-keyframes moveLeftAni{
        from {width: 300px;}
        to   {width: 100px;}
    }

我的问题是，当页面首次加载时，我总是看到元素从 300px 缩放到 100px 动画，因为 animationOn 默认为 false。我需要在页面首次加载时将元素留在100px 中，而不是看到它应用moveLeftAni 动画。有没有办法做到这一点？非常感谢！

【问题讨论】：

标签： html angularjs css animation

【解决方案1】：

因此存在三种状态 - 无 (0)、moveRight (1) 和 moveLeft (2)。所以让它默认为空，onclick 使其类似于animationOn = animationOn == 2 ? 1 : 2，类类似于(animationOn ? (animationOn == 2 ? 'moveRight':moveLeft) : '')。

您也可以仅在第一次点击后启用 CSS，方法是向父级应用一个类并在 CSS 中使用它。

【讨论】：