切换类时的背景图像转换

Question

我有一个带背景图片的div。使用js我切换该div上的类来chaneg背景。我想顺利切换 - 不要像切换那么突然。我在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

喜欢这个？的 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");
}

Answer 2

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;}