Question

令我感到沮丧的是，我没有尽头。在我发布代码之前，这是一个摘要：

目标，简单来说：当我双击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>

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

Answer 1

问题是默认情况下“hidden”元素的初始不透明度为1。您只需将其设置为0.并删除display: none -

*.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之前设置fadeOut。

Answer 2

我知道你要求JS重答，但我强烈建议切换一类“主动”，“开放”或类似的东西，并使用CSS进行过渡。少了就是这里。

这是一个例子，我不仅转换了不透明度，还转换了z-index。如果你打算在下面有任何元素，例如需要悬停，点击等的按钮，这就是这些过渡的关键。

JS Fiddle

关键部分：

.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;
}

修改

我只是在为自己的项目弄乱这类东西，并观察Stripe处理导航栏的美妙程度。这么简单的东西改变了一切，那就是指针事件。如果你对它的support没什么问题，（值得注意的是没有，即10），这就更容易整合了。这是导航栏中模拟的另一个小提琴。

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

https://jsfiddle.net/joshmoxey/dd2sts7d/1/

Answer 3

以下是使用Javascript Animate API的示例。但是，IE / Edge不支持Animate API。

＆＃13;

var element = document.getElementById("fade-in-out")

var button = document.getElementById("x")

button.addEventListener("click", function(event) {
  element.animate([{opacity: 1, visibility: "visible"},{opacity: 0, visibility: "hidden"}], {duration: 2000})
  
  setTimeout(function() { element.remove() }, 2000)
})

button.addEventListener("dblclick", function(event) {
  element && element.animate([{opacity: 0}, {opacity: 1}], {duration: 2000})
})

＆＃13;

<input id="x" type="button" value="Click here" />
<div id="fade-in-out"> FADE ME </div>

＆＃13;

不透明度转换适用于淡出，但不会淡入

3 个答案: