Vue.js转换和转换组动画不工作

我有一个Vue 2旋转木马组件，带有使用

v-for

生成的幻灯片子组件。使用

v-show

显示和隐藏幻灯片。我无法让幻灯片之间的CSS

transition

s正常工作

我试着用

包装幻灯片，但是

模式=out in

没有任何作用，在转换过程中，我在旋转木马中看到两张幻灯片，一张淡入，另一张淡出。当我用

包装幻灯片时，CSS

转换

根本不显示，幻灯片只是被替换了

我看过，但是幻灯片是基于API的链接列表生成的，我没有看到将动态生成与此解决方案相结合的方法

---

这里有一个

我认为这是因为您不需要使用

v-show

您应该只使用

，然后在CSS中定义您的转换

---

您应该看到这一点，它对我很有用。

如果您不打算对图像进行交叉淡入淡出（即，在任何给定的时间点，屏幕上实际上只有一个图像），您可以重新构造代码，例如在同一时间只渲染一个

组件。您只需指定一个动态更新的唯一键，例如滑块组件的

活动

数据

您的模板现在将如下所示：

<div class="carousel-wrapper" id="promotions">
    <transition name="component-fade" mode="out-in">
        <!-- Bind image url dynamically, bind key to active index -->
        <Slide class="slide" :url="imageUrl" :key="active"></Slide>
    </transition>
</div>

Slide

组件应该像我们需要的那样“哑”：在这种情况下，它只接收动态绑定的图像URL，其他什么都没有：

<div>
    <img :src="url" class="image">
</div>

.carousel包装器{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
身高：100%；
}
.carousel{}
.圆点{
最大宽度：100%；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
位置：绝对位置；
底部：2米；
z指数：1；
}
多特先生{
高度：1米；
宽度：1米；
边距：0.1米0.1米；
边界半径：50%；
背景色：红色；
}
.组件淡入激活状态，
.组件淡入淡出激活状态{
过渡：不透明度1s；
}
.组件淡入淡出，
.组件淡出至{
不透明度：0；
}
.幻灯片{
宽度：100%；
高度：650px；
}
.形象{
最大宽度：100%；
最大高度：650px；
}

<div>
    <img :src="url" class="image">
</div>