jquery - jQuery 属性更改的 CSS 动画

Question

我有一个基本上位于笔记本电脑外壳中的图像容器。每次 src 更改时，我都试图在笔记本电脑上为屏幕截图设置动画(向左/向右滑动)

HTML

 <img class="img-responsive laptop-screen" src="img-container/demo-laptop.png">

jQuery 函数

$("a").click(function(){
    $(".laptop-screen").attr("src", newsrc);
});

单击时 src 发生变化，但新图像会立即弹出。有什么方法可以让我在中滑动它而不必使用display:none;

创建多个img 标签

Answer 1

编织: http://kodeweave.sourceforge.net/editor/#9f75750659b0d82a63bb885b17058c98

您实际上可以在没有 JavaScript 的情况下使用纯 CSS 制作动画。在这种情况下，我使用 JavaScript 只是为了切换类和图像源。

var changeIMG = document.querySelector(".changeIMG")
var oldSrc = 'http://i.telegraph.co.uk/multimedia/archive/02223/bear-cub-toy_2223075k.jpg'
var newSrc = 'http://image.mlive.com/home/mlive-media/width960/img/grandrapidspress/photo/2015/03/20/-6328b3da95a15820.JPG'

function changeSrc() {
  var imgElement = document.querySelector(".laptop-screen")
  var src = imgElement.src

  imgElement.src = src === oldSrc ? newSrc : oldSrc
  
  $('.laptop-screen').toggleClass('loaded preload')
}

changeIMG.onclick = function() {
  changeSrc()
}
changeSrc()

body {
  padding: 1em;
  text-align: center;
}
img {
  margin: auto;
}

.changeIMG {
  display: block;
}

.loaded, .preload {
  display: block;
  width: 0;
  margin: 1.1em auto 0 auto;
}
.loaded {
  animation: scale .3s normal forwards;
}
.preload {
  animation: scaleIMG .3s normal forwards;
}

@keyframes scale {
  to {
    width: 52%;
  }
}
@keyframes scaleIMG {
  to {
    width: 52%;
  }
}

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

<button type="button" class="btn changeIMG btn-primary">
  Change Source
</button>

<img class="loaded laptop-screen">