通过 Vue 实现 Carousel（如何使用 transition？）

Question

我是 Vue 新手，正在尝试通过 Vue 制作轮播。

我有代码：https://jsfiddle.net/z3m76w5r/4/（示例）

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

我想要我的轮播动画。但是我的 transition-vue 不起作用，尽管我查看了文档和手册。

Answer 1

使用 Vue 内置 <transition> 组件的转换不起作用的原因是它 designed 在一些 element/component 进入或离开 DOM 在上下文中：

条件渲染（使用v-if）
条件显示（使用v-show）
动态组件
组件根节点

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

为了过渡到工作，您需要在过渡期间在 DOM 中至少存在 2 个 img 标签 - 一个离开 DOM 和一个进入 DOM DOM。最简单的方法是将 v-for 与 key 和 transition-group 一起使用，而不仅仅是 transition。您只需更改图像的索引，v-for 将创建新的 img 元素，对其应用 "enter" 过渡，并将 "leave" 过渡到旧的 img 元素（对于先前的索引）

你可以找到很好的例子 here

通过 Vue 实现 Carousel（如何使用 transition？）

Carousel via Vue (how use transition?)

animation

transition

carousel

vue.js

vuejs2