0

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

CSS：

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

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

当您在此处的主页上单击“查询”时，不透明度#login更改为 1。过渡效果很好！当您单击登录表单下方的“oder registriere dich neu”时，登录部分opacity: 0再次获取 - 然后获取display: none. 这也适用于过渡。

但是，然后将 REGISTER-Section 放入display: block然后opacity: 1（在setTimeout500 毫秒后）。这没有过渡！为什么？当我点击“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 是部分，我想淡入（女巫不要 WOKR 登录和注册）！

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

4

2 回答 2

2

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

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

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

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

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

隐藏它。

于 2013-10-17T09:36:06.773 回答
1

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

IDIn 最初具有displayasnone和opacityas的属性0。

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

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

所以解决方案很简单，只需放在display您的setTimeout. 先做出display改变。

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

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

}
于 2013-10-17T09:48:47.040 回答