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>

我想给我的轮播制作动画。但是，尽管我查看了文档和手册，但我的转换提示仍无法正常工作。

Answer 1

为什么使用Vue内置<transition>组件进行转换不起作用的原因是，当某些元素/组件在以下情况下进入或离开DOM时，其designed可以正常工作：

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

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

为使过渡正常进行，在过渡期间，DOM中至少需要存在两个img标记-一个标记正在离开DOM，另一个标记正在进入DOM。最简单的方法是将v-for与key和transition-group结合使用，而不仅仅是transition。您只需更改图像的索引，v-for将创建新的img元素，对其应用“ enter”过渡，并对旧的img元素进行“ leave”过渡（用于先前的索引）

您可以找到有关here

的很好的例子

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

1 个答案: