如何将CSS标题徽标与响应UI的转换进行交换

我有以下代码可以在浏览器调整大小时转换为移动图像，但是更改太突然了。我想让它有生气。有办法吗？另外，我正在使用Bootstrap和AngularJs，那么有没有一种内置到这两个框架中的方法可以帮我做到这一点呢

<a href="/">
  <div class="logo">
    <img id="desktoplogoimage" src="images/logo.png" alt="">
    <img id="logoimage" src="images/logo-mobile.png" alt="">
  </div>
</a>


.logo img {
  display:block;
}

.logo img+img {
  display:none;
}


@media only screen and (min-width: 150px) and (max-width: 600px) {
  .logo img {
    display:none;
  }

  .logo img+img {
    display:block;
  }
}

.logo img{
显示：块；
}
.标志img+img{
显示：无；
}
@仅介质屏幕和（最小宽度：150px）和（最大宽度：600px）{
.logo img{
显示：无；
}
.标志img+img{
显示：块；
}
}

如果您想要一个仅CSS的解决方案，这里是我快速组合的一个示例。调整小提琴窗口的大小以查看效果

演示

---

添加不透明度，然后像上面一样过渡

如果不同分辨率的图像相同，则可以将图像调整为徽标div，当div增大时，图像大小将增大

对于不同的图像，可以使用CSS转换

.logo img {
  display:block;
}
.logo img+img {
   display:none;
   opacity: 0; 
   transition: opacity .25s ease-in-out;
}

@media only screen and (min-width: 150px) and (max-width: 600px){
.logo img {
   display:none; 
   opacity: 0; 
   transition: opacity .25s ease-in-out;
}

.logo img+img {
   display:block;

---

}

您希望过渡是淡入淡入效果还是平滑调整大小效果？是两个不同的图像，还是只是图像的分辨率不同？这不起作用。。。图像在调整大小时消失。如果有帮助的话，我使用Chrome。这很好，但较小的图像有时会在一瞬间出现，然后两个图像都可见…我的道歉我忽略了位置：绝对。。。这太棒了

.logo img {
   display:block;
}
.logo img+img {
   display:none;
   opacity: 0; 
   transition: opacity .15s ease-in-out;
}

@media only screen and (min-width: 150px) and (max-width: 600px){
.logo img {
   display:none; 
   opacity: 0; 
   transition: opacity .15s ease-in-out;
}

.logo img+img {
   display:block;
} 

.logo img {
  display:block;
}
.logo img+img {
   display:none;
   opacity: 0; 
   transition: opacity .25s ease-in-out;
}

@media only screen and (min-width: 150px) and (max-width: 600px){
.logo img {
   display:none; 
   opacity: 0; 
   transition: opacity .25s ease-in-out;
}

.logo img+img {
   display:block;