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

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是默认假。当页面首次加载而不是看到它应用moveLeftAni动画时，我需要将元素保留在100px中。有没有办法做到这一点？非常感谢！

Answer 1

所以有三种状态 - 无（0），moveRight（1）和moveLeft（2）。因此，它默认为没有，并onclick使它像animationOn = animationOn == 2 ? 1 : 2，类似(animationOn ? (animationOn == 2 ? 'moveRight': moveLeft ) : '')。

您也可以在第一次点击之后，通过向父级应用类并在CSS中使用该级别来启用CSS。