CSS動畫不會即刻消失

我有一個組件需要從動畫左側滑入。但是我需要相同的組件立即消失。但通過下面的代碼，該組件帶有我想要的動畫，但需要2秒才能消失。我應該如何改變它，所以組件會立即消失？CSS動畫不會即刻消失

@keyframes slide-in { 
    from {left: -350px;} 
    to {left: 0;} 
} 

.how { 
    position: relative; 
    animation-name: slide-in; 
    animation-duration: 2s; 
}

爲使組件消失，我正在使用ng-if（AngularJS）。

<div class="m-b col-md-6 how"> 
    <p ng-if="active==1;" class="how"> First </p> 
    <p ng-if="active==2;" class="how"> Second </p> 
    <p ng-if="active==3;" class="how"> Third </p> 
    <p ng-if="active==4;" class="how"> Forth</p> 
</div>

這裏是實際修改的活躍值的代碼：

<div class="m-b col-md-6"> 
    <div class="m-b"> 
     <butto ng-click="active=1;"> Step 1</button> 
    </div> 
    <div class="m-b"> 
     <button ng-click="active=2;">Step 2</button> 
    </div> 
    <div class="m-b"> 
     <button ng-click="active=3;">Step 3</button> 
    </div> 
    <div class="m-b"> 
     <button ng-click="active=4;">Step 4</button> 
    </div> 
</div>

，表示該部件不與上面的代碼消失了，但它需要2秒鐘就消失了！

來源

2015-12-29 MahshidYassaei

你的問題只有在動畫的幻燈片。你如何讓它消失？ – BSMP

你的意思是在動畫之後消失嗎？ –

請爲您的問題添加足夠的代碼，以便我們重現動畫。 – TylerH

要使元素在視覺上消失，可以將不透明度設置爲0.該元素仍將佔用頁面上的空間。

JSFiddle

@keyframes slide-in { 
    0% {left: -350px; opacity: 1;} 
    99% {left: 0; opacity: 1;} 
    100% {left: 0; opacity: 0;} 
} 

.how { 
    opacity: 0; 
    position: relative; 
    animation-name: slide-in; 
    animation-duration: 2s; 
}

來源

2015-12-29 22:11:50 Holger

CSS動畫不會即刻消失

回答

相關問題