如何在我的情況下在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。