切换类时的背景图像过渡

Question

我有一个带有背景图片的 div。使用 js 我切换该 div 上的类以更改背景。我想要一个平滑的切换——不像切换那么突然。我在 CSS 过渡方面遇到了困难。不确定在这种情况下我是否正确使用它们。我可以使用 :hover 进行更改，但这似乎不起作用。作为旁注，我正在使用 Angular ngClass 来切换这些类，我发现 ngAnimate 可能有一些用途......

.waiting {
  background-image: url("/images/waiting.png");
  -webkit-transition: opacity 10s ease-in-out;
  -moz-transition: opacity 10s ease-in-out;
  -o-transition: opacity 10s ease-in-out;
  transition: opacity 10s ease-in-out;
}

.uploading {
  background-image: url("/images/uploading.png");
  -webkit-transition: opacity 10s ease-in-out;
  -moz-transition: opacity 10s ease-in-out;
  -o-transition: opacity 10s ease-in-out;
  transition: opacity 10s ease-in-out;
}

Answer 1

div{position:relative;}
div:after,
div:before{
    content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity: 0;
  background-image: url("/images/waiting.png");
  -webkit-transition: opacity 10s ease-in-out;
  -moz-transition: opacity 10s ease-in-out;
  -o-transition: opacity 10s ease-in-out;
  transition: opacity 10s ease-in-out;
}
div:before{background-image: url("/images/uploading.png");}
div.waiting:after{opacity:1;}
div.uploading:before{opacity: 1;}

Answer 2

像这样？ jsFiddle

div {
    width:300px;
    height:300px;
}
.waiting, .waiting > span {
    background-image: url("http://static3.fjcdn.com/thumbnails/comments/feels+man+_96209287ce84931447c2d1b56fd3ef29.jpg");
    -webkit-transition: opacity 200ms linear;
    -moz-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    -ms-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
    display:block;
}
.waiting > span {
    cursor:pointer;
    opacity:0;
    width:300px;
    height:300px;
    background-size:contain;
}
.waiting span:hover {
    opacity:1;
    background-image: url("http://media.tumblr.com/tumblr_m1wo3uPxfH1qzfo1i.png");
}