Css事务 - 隐藏不退色

Question

我目前有这样的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秒。有没有办法隐藏，而不必删除淡化效果？

Answer 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中明确更改时，它不会生成动画。