CSS 过渡没有缓和

Question

SO 上有很多关于此的问题，但其中 none 可以帮助我。

我正在尝试根据按钮悬停缓入和缓出背景图像。 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 本身。然后，在悬停时添加的 class 只需要影响不透明度，你就会有一个平滑的缓出。

看这个fiddle： 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;
}

CSS 过渡没有缓和

CSS Transition not easing out

javascript

css

css-transitions