CSS 过渡没有缓和

Question

在 SO 上有很多关于此的问题，但没有一个可以帮助我。

我正在尝试根据按钮悬停来缓入和缓出背景图像。 Here is the fiddle

HTML:
<div class="bg bg-home"></div>
<div class="main-menu" id="home">
  <a href="#">Home</a>
</div>

JS:
$('#home').hover(function() {
    $('.bg.bg-home').addClass('home-main-menu');
},function() {
    $('.bg.bg-home').removeClass('home-main-menu');
});

CSS:
html,body {
    height: 100%;
}
.bg {
  -webkit-transition: all 1s;
  transition: all 1s;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
}
.bg-home {
    position:absolute;
    left:0;
    top:0;
    z-index: -1; 
    width: 100%;
    height: 100%;
}
.home-main-menu {
  background: url("http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/1/11/1357921737290/Masterclass-in-HTML5-and--006.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}

问题是背景图像缓入很好，但没有缓出。我也尝试只在不透明度中进行过渡，但结果相同。

谁能解释我做错了什么？

提前谢谢你。

Answer 1

您可以将背景图像切换为 .bg-home 本身。然后，在悬停时添加的类只需要影响不透明度，您就可以顺利缓出。

看到这个小提琴： https://jsfiddle.net/Ltv58jmh/2/

.bg-home {
    position:absolute;
    left:0;
    top:0;
    z-index: -1; 
    width: 100%;
    height: 100%;
    background: url("http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/1/11/1357921737290/Masterclass-in-HTML5-and--006.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity:0;
}
.home-main-menu {
    opacity: 1;
}