Question

我正在尝试创建一个可显示幻灯片的轮播。

我希望发生从一张幻灯片到下一张幻灯片的过渡，这样，如果我们要移到下一张幻灯片，则当前幻灯片向左移动；如果我们要移到上一张幻灯片，则当前向后移动。

我有这个旋转木马的独立代码在这里工作（如果您原谅粗俗的话）： https://codesandbox.io/s/lp4yo72q39?fontsize=14

然后我尝试将这段代码包装在组件中，以便在需要轮播时可以编写这样的模板：

<slider>
    <slide key="abc"> <h1>First</h1> </slide>
    <slide key="def"> <h1>Second</h1> </slide>
    <slide key="ghi"> <h1>Third</h1> </slide>
</slider>

为此，我创建了两个组件-Slider和Slide。 Slider是容器，它将包含一个或多个Slide组件。我正在使用slots获得所需的功能。

我将slide组件包裹在transition-group中，如下所示：

Slider.vue：

<transition-group :name="transitionName" tag="div">
  <slot></slot>
</transition-group>

取决于我们是否向前/向后移动，transitionName属性控制着我们是从右向左还是从左向右进行动画：

 computed: {
     transitionName: ({ direction }) =>
         direction > 0 ? "out-left" : "out-right"
 },

Slide.vue：

<template>
  <div
    v-show="active"
    class="sliding-tab"
    :title="title"
    :id="tabId">
    <slot></slot>
  </div>
</template>

我的组件在这里工作： https://codesandbox.io/s/lxyo3p31p7?fontsize=14

虽然功能可以按预期运行，但我看不到transition-group没有任何效果，而扁平化（没有组件）时相同的代码和样式似乎可以正常工作。

我可以使用一些帮助来了解这里可能发生的情况。

Vue转换组不能与插槽一起使用？

0 个答案: