通过 Vue 进行轮播（如何使用过渡？）答案

【问题标题】：Carousel via Vue (how use transition?)通过 Vue 进行轮播（如何使用过渡？）
【发布时间】：2019-11-25 12:24:11
【问题描述】：

我是 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 不起作用，尽管我查看了文档和手册。

【问题讨论】：

标签： vue.js animation vuejs2 carousel transition

【解决方案1】：

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

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

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

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

您可以找到 here 的绝佳示例

【讨论】：

谢谢你，米哈尔！是的，我以为我用错了 vue-transition。