当元素使用 fadeIn/fadeOut 动画时，其顶部的元素会闪烁

Question

JSFiddle 上的演示，一旦页面加载转换将在 3 秒后归档。

左上角的按钮随着图像淡化而闪烁 in/out。它不特定于按钮，可以是 div 或其他元素而不是按钮。它也不特定于 Bootstrap，如果您删除 Bootstrap CSS 同样的事情会发生。

这种闪烁 velocity.js 是特定的还是 CSS 动画的普遍问题？在网上搜索了大约一个小时后找不到任何可用的东西。

如何解决这个问题？

N.B。写这篇文章时得到警告，JSFiddle 链接必须附有代码，所以这里是示例代码：

HTML:

<div class="buttons">
  <button class="btn btn-warning">one</button>
  <button class="btn btn-primary">two</button>
</div>
<div id="container">
  <!-- CC BY: Timelapse Lezard by Deevad -->
  <img class="first" src="http://pre02.deviantart.net/6eb5/th/pre/f/2011/237/d/2/timelapse_lezard_by_deevad-d47rwef.png">
  <!-- CC BY: The Achkinnal Falls by FerdinandLadera -->
  <img class="second" src="http://img09.deviantart.net/a98b/i/2012/272/d/4/the_achkinnal_falls_by_ferdinandladera-d5gatw1.jpg">
</div>

CSS:

body
{
    margin: 0px;
    overflow: hidden;
    background-color: #000000;
}

#container
{
    width: 100%;
    height: 100%;
}

img
{
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

.buttons
{
    position: absolute;
    top: 20px;
    left: 20px;
}

Javascript:

$(document).ready(function(){

$('.second').hide()

const showNextImage = function()
{
    $('.first')
    .velocity( 'fadeOut',
    {
        duration: 500,
        complete: function()
        {
            $('.second')
            .velocity( 'fadeIn',
            {
                duration: 500
            })
        },
    })
}

setTimeout( showNextImage, 3000 )


})

Answer 1

这里是固定的：https://jsfiddle.net/q7phyrsg/2/

您的按钮需要 z-index: 999，因为图像位于按钮之上。

当元素使用 fadeIn/fadeOut 动画时，其顶部的元素会闪烁

When element is animated with fadeIn/fadeOut, elements on top of it flicker

javascript

velocity.js