CSS Анимация не исчезает мгновенно

Question

У меня есть компонент, который нужно скользить слева от анимации. Но мне нужно, чтобы тот же компонент исчез сразу. Но со следующим кодом компонент приходит с анимацией, которую я хочу, но занимает 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> 

А вот код, который фактически изменяет значение активной:

<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 секунды для того, чтобы исчезнуть!

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