为什么过渡不起作用？

Question

我有一个名为“登录”的部分和一个名为“注册”的部分。 当它们的不透明度发生变化时，我想要一个需要 0.3 秒的线性过渡。

CSS：

#login{
opacity: 0;
transition:opacity 0.3s linear;}

#register{
opacity: 0;
display: none;
transition:opacity 0.3s linear;}

当您进入主页HERE 并点击“查询”时， #login 的不透明度变为 1。过渡效果很好！ 当您点击登录表单下方的“oder registriere dich neu”时， 登录部分再次获得opacity: 0 - 然后获得display: none。 这也适用于过渡。

但是而不是将 REGISTER-Section 放到 display: block 然后 opacity: 1 （在 500 毫秒的 setTimeout 之后。） 这没有过渡！为什么？ 当我点击“Hast du schon einen Account？”时再次（返回登录）， 注册块将再次完美地淡出过渡，登录表单再次出现没有过渡？

这是设置不透明度的 Javascript 代码：

function changeSection(IDOut, IDIn)
{
    var IDOut = "#" + IDOut;
    var IDIn = "#" + IDIn;

    hideSection(IDOut);
    showSection(IDIn);
}

function hideSection(IDOut)
{
    $(IDOut).css({opacity: "0"});
    setTimeout(function(){
        $(IDOut).css({display: "none"});
    },500);
}

function showSection(IDIn)
{
    setTimeout(function(){
        $(IDIn).css({display: "block"});
        $(IDIn).css({opacity: "1"});
    },500);

}

IDOut 是部分，我想淡出（witch 非常适合登录和注册）。

IDIn 是分区，我要淡入（女巫不要工作来登录和注册）！

为什么转换对 IDIn 不起作用？ 有什么想法吗？

Answer 1

根据您的代码，转换不起作用。

IDIn 最初将display 属性作为none 和opacity 作为0。

根据showSection函数，你先等待500ms，然后将display和opacity属性同时设置为你想要的。 并发是问题，因为显示和不透明度在一个动画帧中同时改变，但浏览器必须选择一个属性来传输。并选择display。

从技术上讲，过渡仅适用于可见且具有尺寸的元素。宽度和高度不能为零。所以display:none; 取消了你的转换。

所以解决方案很简单，只需将display 放在您的setTimeout 之外。先修改display。

相对于原生 jQuery 方法fadeIn 的好处是它利用了 css 过渡，这比 jQuery 的底层动画更有效。

function showSection(IDIn)
{        
    $(IDIn).css({display: "block"});
    setTimeout(function(){
        $(IDIn).css({opacity: "1"});
    },500);

}

Answer 2

您正在使用 jQuery，您可以更简单地执行此操作并让 jQuery 为您处理。

使用以下代码代替 showSection 和 hideSection：

$('#yourselector').fadeIn(300);

以 300 毫秒的时间淡入一个元素，并且：

$('#yourselector').fadeOut(300);

隐藏它。