为什么转换不起作用？

我得到了一个名为“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。这也适用于转换。

但比REGISTER截面投入display: block，然后opacity: 1（500的setTimeout毫秒后）。这没有转变！为什么？当我点击“Hast du schon einen帐户？”时再次（回到登录），寄存器块会淡出再次转换perfecty，并且登录表单出现没有又一次转换？

这里的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是部分，我想淡入（女巫不要WOKR登录和注册）！

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

来源

2013-10-17 Dominik Seemayr

请给我们一个jsfiddle，以便我们编辑！ –

无论如何，你可以尝试把'$（IDIn）.css（{display：'block'}）;'setTimeout之外。 –

也不能在setTimeout之外工作。我试着把它放在jsfiddle上，等一下。 –

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

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

根据功能showSection，你先等待500毫秒，然后display和opacity财产同时设置你想要什么。 并发性是问题所在，因为显示和不透明度同时在一个动画帧中更改，但浏览器必须选择一个属性来传输。它选择display。

更为技术性地说，转换仅适用于可见且具有维度的元素。宽度和高度不能为零。因此display:none;会取消您的转换。

所以解决方案很简单，只需在setTimeout之外放display即可。先制作display。

原生jQuery方法fadeIn的好处是它利用了css转换，它比jQuery的底层动画效率更高。

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

}

来源

2013-10-17 09:48:47

无论如何，使用fadeIn更容易。所以选择你喜欢的任何东西;） –

男人，你是我今天的英雄。谢谢！ –

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

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

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

褪色的元素在300毫秒的时间，并且：

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

将其隐藏。

来源

2013-10-17 09:36:06 SidOfc

fadeOut和fadeIn究竟做了什么？它只是改变不透明度？ –

fadeIn/fadeOut更改不透明度并显示元素，使显示块不透明度1元素首先具有不透明度为0的动画，然后显示无。这可以做你需要的一切。 – SidOfc

我认为这也可以，谢谢！我决定解决方案@Herrington Darkholme。 –

为什么转换不起作用？

回答

相关问题