我正在尝试使用 Vue 过渡组来实现这种轮播/幻灯片效果：
如您所见，他们在上一步上升时为一个列表项（步骤）设置动画，而当前一个在时间轴之后上升，其内容也随之上升。
我不确定我想要完成的事情是否可以使用transition-group，因为整个父块将进行动画处理，而不是子节点。如果是这样的话，如果我至少可以为父块设置动画，我会很高兴。
另一个警告是，当我使用transition-group没有v-if或没有过滤列表时，默认情况下会呈现所有步骤，这并不好。
这是我的 HTML 结构：
<transition-group class="steps-viewport" name="steps" tag="div">
<div v-for="step in currentStep" :key="step.order" class="step-wrapper">
<h3 class="is-size-5 mb-6 has-text-grey-light">
Passo {{ step.order }}
</h3>
<h1 class="is-size-3">{{ step.title }}</h1>
<h2 class="is-size-4 mt-2 has-text-grey">{{ step.headline }}</h2>
<component
class="mt-5"
v-bind:is="step.component"
@status-changed="handleStatusChange($event)"
></component>
</div>
</transition-group>
这是我的 CSS：
.component-wrapper {
width: 100%;
.steps-viewport {
height: calc(100vh - 10rem);
overflow: hidden;
display: flex;
flex-direction: column;
.step-wrapper {
flex: 0 0 calc(100vh - 10rem);
display: flex;
justify-content: center;
flex-direction: column;
}
}
}
最后但并非最不重要的是，我的组件的脚本：
import ProductInfo from "./ProductInfo";
export default {
components: {
ProductInfo
},
props: {
defaultActiveStep: {
type: Number,
default: 1
}
},
watch: {
activeStep() {
this.$emit("step-changed", this.activeStep);
}
},
computed: {
currentStep() {
return this.steps.filter(s => s.order === this.activeStep);
}
},
data: () => {
return {
activeStep: 1,
steps: [
{
order: 1,
title: "Title 1?",
headline:
"Headline 1",
component: "product-info"
},
{
order: 2,
title: "Title 2",
headline:
"Headline 2.",
component: "product-info"
},
{
order: 3,
title: "Title 3",
headline:
"Headline 3.",
component: "product-info"
},
{
order: 4,
title: "Title 4!",
headline:
"Headline 4",
component: "product-info"
}
]
};
},
methods: {
handleStatusChange(status) {
const first = this.steps.shift();
this.steps = this.steps.concat(first);
}
}
};