javascript - 如何将过渡添加到 JavaScript 切换类

Question

我在 JavaScript 中制作了一个切换类，其中有一个 div，它在鼠标悬停时切换其类。 div 的一个类具有彩色背景，另一个类具有图像。问题是图片是瞬间进来的，传输不流畅

我的 CSS 代码是:

.container{
}

.first{
    height: 100%;
    width: 33%;
    position: absolute;
    background-color: #ecf0f1;
    top: 0px;
    left: 0px;
    background-color: none;
    -webkit-transition: all 0.5s ease-in-out;
}
.sec{
    height: 100%;
    width: 33%;
    position: absolute;
    background-color: #ecf0f1;
    top: 0px;
    left: 0px;
    z-index: 5;
    background: url(1.jpg);
    background-color: none;
    -webkit-transition: all 0.5s ease-in-out;
} 

我的 HTML 代码是:

<div id="container" class="first"><span>HELOO</span>
</div>

最后我的 JavaScript 是:

this.classList.toggle('first');
        this.classList.toggle('sec');
        document.getElementById('#container').style.WebkitTransition = 'all 0.5s';
    }
    document.querySelector('#container').addEventListener('mouseenter', a )
    document.querySelector('#container').addEventListener('mouseout', a )
    document.getElementById('#container').style.WebkitTransition = 'all 0.5s';

Answer 1

你不能在背景图像上设置过渡效果，但有一些方法可以模拟它。看看这段代码:

jsFiddle

HTML

<div>
    <span>HELOO</span>
</div>

CSS

div{
    width:200px;
    height:200px;
    background:url(http://lorempixel.com/200/200);
    position:relative;
}
span{
    position:absolute;
    width:100%;
    height:100%;
    background-color:#ddd;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
}
span:hover{
    background-color:transparent;
}