切换类别时的背景图像转换

Question

我有一个带有背景图像的div。使用js，我切换该div上的类以切换背景。我想要一个平稳的切换——不要像切换那样突然。我在CSS转换方面遇到了困难。不确定我在这种情况下是否正确使用了它们。我可以使用：悬停进行更改，但这似乎不起作用。顺便说一句，我正在使用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");
}