当元素使用淡入淡出动画时，其顶部的元素闪烁

debugcn 发表于 Dev

尼达尔普雷斯

在JSFiddle上演示，一旦页面加载转换将在 3 秒后文件。

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

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

这怎么能解决？

NB 在写这篇文章时收到警告，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 )


})

库柏丸山

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

你需要z-index: 999在你的按钮上，因为图像放在它们上面。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。