Vue.js 通过Vue旋转传送带（如何使用转换？）

我是Vue的初学者，我尝试通过Vue制作旋转木马

我有代码：（示例）

.开关进入激活状态，
.开关保持激活状态{
过渡：全部。5s轻松进出；
}
.开关进入{
左：100%；
}
.离开，
.离开{
左-100%；
}

---

我想要我的旋转木马。但是我的转换vue不起作用，尽管我查看了文档和手册。

使用vue内置组件的转换不起作用的原因是，当某些元素/组件在以下上下文中进入或离开DOM时，转换不起作用：

• 条件呈现（使用

  v-if

  ）
• 条件显示（使用

  v-show

  ）
• 动态组件
• 组件根节点

您的图像元素没有进入或离开DOM。它就在那里，您正在更改它的属性（如url等，它不能以任何方式设置动画）

为了使转换正常工作，您需要在转换期间在DOM中至少存在2个

img

标记-一个正在离开DOM，另一个正在进入DOM。最简单的方法是将

v-for

与

key

和

transition group

一起使用，而不仅仅是

transition

。您只需更改图像的索引，

v-for

将创建新的

img

元素，对其应用“回车”转换，并将“离开”转换为旧的

img

元素（对于以前的索引）

---

你可以找到很好的例子

谢谢你，迈克尔！是的，我想我用错了vue转换。

<style>
    .switch-enter-active,
    .switch-leave-active {
      transition: all .5s ease-in-out;
    }

    .switch-enter {
      left: 100%;
    }

    .switch-leave,
    .switch-leave-to {
      left: -100%;
    }
  </style>

  <div id="banner">
    <transition name="switch">
      <banner class="content" v-bind:slide="currentSlide"></banner>
    </transition>
  <div>