Vue.js 图片动画：实现两张图片左右交替移动效果

本文将使用 Vue.js、CSS 和 JavaScript 实现两张图片从左往右交替移动的动画效果。您可以通过以下代码示例，轻松创建图片切换动画。

HTML 部分

<div id="app">
  <div class="container">
    <img class="left" :src="img1" :style="{left: img1Left}">
    <img class="right" :src="img2" :style="{left: img2Left}">
  </div>
</div>

CSS 部分

.container {
  position: relative;
  width: 600px;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
}

.left, .right {
  position: absolute;
  top: 0;
  width: 300px;
  height: 300px;
  transition: all 1s ease-in-out;
}

.left {
  left: 0;
}

.right {
  left: 300px;
}

JS 部分

new Vue({
  el: '#app',
  data: {
    img1: 'img1.jpg',
    img2: 'img2.jpg',
    img1Left: '0',
    img2Left: '300px'
  },
  mounted() {
    setInterval(() => {
      this.img1Left = this.img1Left === '0' ? '-300px' : '0';
      this.img2Left = this.img2Left === '0' ? '300px' : '0';
    }, 2000);
  }
});

实现效果

两张图片会每隔 2 秒从左往右移动，交替移动。