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动画不会即刻消失

回答

相关问题