html - 在我的情况下，如何在CSS中应用动画？

我正在尝试分配类以基于变量进行动画处理。

我有类似的东西

//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动画。反正有这样做吗？非常感谢！

最佳答案

因此，共有三个状态-无（0），moveRight（1）和moveLeft（2）。因此，将其默认设置为无，然后onclick将其设置为animationOn = animationOn == 2 ? 1 : 2之类，将其设置为(animationOn ? (animationOn == 2 ? 'moveRight': moveLeft ) : '')之类。

您也可以仅在第一次单击后启用CSS，方法是将一个类应用于父对象并在CSS中使用它。