CSS动画没有'；不要马上离开

我有一个组件需要从左边滑入动画。但我需要相同的组件立即消失。但是在下面的代码中，该组件与我想要的动画一起出现，但需要2秒钟才能消失。我应该如何改变它，使组件立即消失

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

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

为了使组件消失，我使用了ng if（AngularJS）

首先
秒

第三个

Forth

下面是实际修改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
步骤3
步骤4

---

因此，组件确实会随着上面的代码消失，但它需要2秒钟才能消失

要使元素在视觉上消失，可以将不透明度设置为0。元素仍将占据页面上的空间

---

若要使元素在视觉上消失，可以将不透明度设置为0。元素仍将占据页面上的空间

---

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

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

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