Question

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

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

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

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

以下是实际修改active：

值的代码

SELECT customers.id,customers.firstname,customers.lastname,customers.email,orders.time,orders.notes,pendings.date_updated,pendings.issue,appointments.closed,appointments.job_description,backup_plans.expiration FROM customers
RIGHT JOIN orders
ON customers.id = orders.customer_id
RIGHT JOIN pendings
ON customers.id = pendings.customer_id
RIGHT JOIN appointments
ON customers.id = appointments.customer_id
RIGHT JOIN backup_plans
ON customers.id = backup_plans.customer_id
ORDER BY orders.time DESC, pendings.date_updated DESC,  appointments.closed DESC,  backup_plans.expiration DESC LIMIT 1

因此组件确实会随着上面的代码消失，但它消失需要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;
}

CSS动画不会立即消失

1 个答案: