Javascript 不透明度转换在淡入淡出时起作用，但在淡入时不起作用

这让我非常沮丧。在我发布代码之前，这里有一个摘要：

简单来说，目标是：当我双击X时，我希望它淡出；单击Y时，我希望X淡入

方法：我使用CSS来创建实际的淡入淡出“动画”。我使用JavaScript在必要时使用一些技巧来应用这些类

问题是：淡入过渡不起作用——元素只是立即出现。让我疯狂的是，当淡入立即添加到淡出对象上时，效果完美。我将在JS代码中作为注释更好地解释这一点

（是的，我在基本元素上添加了

opacity:1

和

transition:opacity

。它根本没有效果。）

守则：

CSS

*.fade-out {
    opacity: 0;
    transition: opacity 400ms;
}
*.fade-in {
    opacity: 1;
    transition: opacity 400ms;
}
*.hide {
    display: none;
    visibility: hidden;
}

JavaScript

$( '#ArtistEmblem' ).on( 'dblclick', function() {
    fadeOut($( '#ArtistEmblem' ));
    fadeIn($( '#btnShowLogo' ));
});
$( '#btnShowLogo' ).on( 'click', function() {
    fadeOut($( '#btnShowLogo' ));
    fadeIn($( '#ArtistEmblem' ));
});

function fadeOut(element) {
    element.addClass( 'fade-out' );

    setTimeout( function () {
        element.addClass( 'hide' );

        /*
        * I tried immediately adding the 'fade-in' class here
        * and it worked -- as soon as the element faded out, it faded
        * back in (using the CSS transition). However, outside of this,
        * it REFUSES to work; everything appears instantly
        */

        console.log('timer triggered');
    }, 400);
}

function fadeIn(element) {
    element.removeClass( 'hide' );
    element.removeClass( 'fade-out' );
    element.addClass( 'fade-in' );
}

相关HTML

<div id="ArtistEmblem">
    <img src="img/logo_artist_2.png" />
</div>

<div id="PopMenu" class="collapse">
    <article>
        <header>
            <b>Debug Menu</b>
        </header>
        <section>
            <button id="btnOpenOverlay">Open Overlay</button>
            <button id="btnShowLogo" class="hide">Show Logo</button>
            <button id="btnClose">Close Menu</button>
        </section>
    </article>
</div>

调试菜单
开放覆盖
展示标志
关闭菜单

---

如果这是显而易见的事情，我很抱歉，但我已经浪费了太多时间试图解决它。如果这是最好的答案，我也愿意接受更好、更快或更有效的解决方案。提前谢谢

问题是“隐藏”元素的初始不透明度默认为1。您只需要将其设置为0。并删除

显示：无

–

*.hide {
    opacity: 0;
}

此外，我还将进行一些重构并删除

setTimeout

：

$('#ArtistEmblem').on('click', function() {
    fade($('#btnShowLogo'), $(this));
});
$('#btnShowLogo').on('click', function() {
    fade($('#ArtistEmblem'), $(this));
});

function fade(inElement, outElement) {
    inElement.removeClass('hide');
    inElement.addClass('fade-in');

    outElement.removeClass('fade-in');
    outElement.addClass('fade-out');
}

---

如果不希望隐藏元素占用空间，并且不希望显示任何元素，则需要在开始

淡出之前设置
display:block

问题是，“隐藏”元素的初始不透明度默认为1。您只需要将其设置为0。并删除

显示：无

–

*.hide {
    opacity: 0;
}

此外，我还将进行一些重构并删除

setTimeout

：

$('#ArtistEmblem').on('click', function() {
    fade($('#btnShowLogo'), $(this));
});
$('#btnShowLogo').on('click', function() {
    fade($('#ArtistEmblem'), $(this));
});

function fade(inElement, outElement) {
    inElement.removeClass('hide');
    inElement.addClass('fade-in');

    outElement.removeClass('fade-in');
    outElement.addClass('fade-out');
}

---

如果您不希望隐藏元素占用空间，并且希望它不显示，那么在开始

淡出之前，您需要设置
显示：block
，

，

我知道您要求的是一个JS沉重的答案，但我强烈建议切换“活动”、“打开”类或者类似的东西，使用CSS进行转换。这里少就是多

这里有一个例子，我不仅看到了不透明度，还看到了z指数。如果你想要在下面有任何元素，比如需要悬停、点击等的按钮，这就是这些转换的关键

关键部分：

.container {
  z-index: -1;
  opacity: 0;
  transition: z-index .01s 1s, opacity 1s;
}

.container.active {
  transition: z-index 0s, opacity 1s;
  z-index: 500;
  opacity: 1;
}

---

编辑

我只是在我自己的项目中玩弄这类东西，观察Beauty Stripe如何处理他们的导航栏。如此简单的事情改变了一切，这就是指针事件。如果你对它满意，（值得注意的是第10条），那么集成起来就容易多了。这是导航栏中的另一个小提琴模拟

关键部分是指针事件：none，因为如果设置为none，它会忽略click事件，几乎就像它不在那里一样，但显然它在那里。我强烈推荐这个

---

我知道你在问一个JS沉重的答案，但我强烈建议你切换一个“活动”、“开放”或类似的类，并在转换时使用CSS。这里少就是多

这里有一个例子，我不仅看到了不透明度，还看到了z指数。如果你想要在下面有任何元素，比如需要悬停、点击等的按钮，这就是这些转换的关键

关键部分：

.container {
  z-index: -1;
  opacity: 0;
  transition: z-index .01s 1s, opacity 1s;
}

.container.active {
  transition: z-index 0s, opacity 1s;
  z-index: 500;
  opacity: 1;
}

---

编辑

我只是在我自己的项目中玩弄这类东西，观察Beauty Stripe如何处理他们的导航栏。如此简单的事情改变了一切，这就是指针事件。如果你对它满意，（值得注意的是第10条），那么集成起来就容易多了。这是导航栏中的另一个小提琴模拟

关键部分是指针事件：none，因为如果设置为none，它会忽略click事件，几乎就像它不在那里一样，但显然它在那里。我强烈推荐这个

---

下面是一个使用Javascript动画API的示例。但IE/Edge不支持动画API

var element=document.getElementById（“淡入淡出”）
var按钮=document.getElementById（“x”）
按钮。addEventListener（“单击”），函数（事件）{
动画（[{opacity:1，可见性：“可见”}，{opacity:0，可见性：“隐藏”}]，{duration:2000}）
setTimeout（函数（）{element.remove（）}，2000）
})
addEventListener（“dblclick”，函数（事件）{
元素&&element.animate（[{opacity:0}，{opacity:1}]，{duration:2000}）
})

FADE ME

下面是一个使用Javascript动画API的示例。但IE/Edge不支持动画API

var element=document.getElementById（“淡入淡出”）
var按钮=document.getElementById（“x”）
按钮。addEventListener（“单击”），函数（事件）{
动画（[{opacity:1，可见性：“可见”}，{opacity:0，可见性：“隐藏”}]，{duration:2000}）
setTimeout（函数（）{element.remove（）}，2000）
})
addEventListener（“dblclick”，函数（事件）{
元素&&element.animate（[{opacity:0}，{opacity:1}]，{duration:2000}）
})

淡入淡出状态

将完整代码与问题中使用的html一起添加尝试创建代码段以便任何人都能提供帮助。将完整代码与问题中使用的html一起添加尝试创建代码段以便任何人都能提供帮助。这是我最初的解决方案（早在我使用任何JavaScript之前），但是

opacity:0

是否仍然渲染元素？此外，它也不能解释为什么立即添加淡入代码（在函数中）效果很好——这是在没有改变初始不透明度的情况下实现的。这毫无意义：\@aprovokedkiwi我添加了一个小的更新，使程序正常运行