Question

我有一个名为“login”的部分和一个名为“register”的部分。当它们的不透明度发生变化时，我希望线性过渡需要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。这也适用于过渡。

BUT 比REGISTER-Section放到display: block然后opacity: 1（在setTimeout 500毫秒之后。）这没有过渡！为什么？当我点击“Hast du schon einen帐户？”时再次（回到登录），寄存器Block将再次以过渡完美淡出，并且登录表单会再次而不会转换？

以下是用于设置不透明度的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是部分，我想淡出（巫婆适合登录和注册）。

IDIn是部分，我想淡入（巫婆不要忘记登录和注册）！

为什么转换不适用于IDIn？ 任何想法？

Answer 1

你正在使用jQuery，你可以做的更简单，让jQuery为你处理它。

而不是showSection和hideSection的代码，请使用：

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

以300毫秒的时间淡化元素，并且：

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

隐藏它。

Answer 2

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

IDIn最初的display属性为none，opacity属性为0。

根据功能showSection，您首先等待500毫秒，然后将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);

}

为什么过渡不起作用？

2 个答案: