Question

我正在尝试将类分配给基于变量的动画。

我有类似

的东西

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

Answer 1

所以有三种状态 - 没有（0），moveRight（1）和moveLeft（2）。因此，将其默认为空，并点击animationOn = animationOn == 2 ? 1 : 2，类似于(animationOn ? (animationOn == 2 ? 'moveRight': moveLeft ) : '')。

您也可以在第一次点击后通过将一个类应用于父级并在CSS中使用它来启用CSS。

在我的案例中如何在CSS中应用动画？

1 个答案: