Css事务-隐藏而不褪色

Css Transactions - Hide without fade

本文关键字：不褪色 隐藏 事务 Css      更新时间：2023-09-26

我目前有一个css动画，如下所示：

-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-transition: all 0.1s linear;

当切换标签时，我用它来提供响应效果，比如：

$("#login-form").delay(100).fadeIn(500);
$("#register-form").fadeOut(100);

问题是，我需要在JS中找到一种方法，在不受事务影响的情况下立即完全隐藏此元素。我正在使用：

document.getElementById("login-container").style.visibility = "hidden";

但隐藏起来需要0.1秒。有没有一种方法可以在不去除渐变效果的情况下立即隐藏？

试试这个：

document.getElementById("login-container").style.display = "none";

当您将元素的显示设置为无时，它会将其完全隐藏在页面上，并忽略和动画效果。

另一个建议是在你的CSS中，尝试指定你想要具有动画效果的属性：

-webkit-transition: {properties} 0.1s linear;
-moz-transition: {properties} 0.1s linear;
-transition: {properties} 0.1s linear;

将visibility从这个范围中删除，当您在JavaScript中显式更改它时，它将不会产生动画。

相关文章：