CSS 动画不会立即消失答案

【问题标题】：CSS Animation doesn't go away instantlyCSS 动画不会立即消失
【发布时间】：2016-04-03 19:13:59
【问题描述】：

我有一个组件需要通过动画从左侧滑入。但我需要相同的组件立即消失。但是使用以下代码，组件带有我想要的动画，但需要 2 秒才能消失。我应该如何改变这个，所以组件会立即消失？

@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>

这里是实际修改active值的代码：

<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 秒才能消失！

【问题讨论】：

您的问题只有动画幻灯片。你是怎么让它消失的？
你的意思是在动画之后消失吗？
请在您的问题中添加足够的代码，以便我们重现动画。
我修改了问题。这样更好吗？
请同时添加管理 ng-if 的代码。目前还不清楚是什么改变了“活跃”值

标签： css angularjs animation

【解决方案1】：

要使元素在视觉上消失，您可以将不透明度设置为 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;
}

【讨论】：