如何向JavaScript切换类添加转换

Question

我在JavaScript中创建了一个toggle类，其中我有一个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;
}

Answer 2

只是为了学习，如果你坚持使用javascript来切换课程。

在http://jsfiddle.net/qtpCS/上查看

使用:after技术:after 。