Vue过渡：如何正确滑动？

问题描述

我有一个v-card，我想一键来回动画。

如果我单击左侧的箭头，则存储卡应向右滚动，然后立即从左侧向后滚动。另一个按钮应该与之相反。

问题是，这里什么也没有发生。我在做什么错了？

我的模板：

<v-card>
    <v-btn icon @click="back = false">
        <v-icon>mdi-arrow-left</v-icon>
    </v-btn>
    <v-btn icon @click="back = true">
        <v-icon>mdi-arrow-right</v-icon>
    </v-btn>
</v-card>

<transition :name="back ? 'slide-fade' : 'slide-fade-reverse'">
    <v-card max-width="200" class="mx-auto mt-5" height="80">
        <span class="d-flex justify-center pt-7">{{back}}</span>
    </v-card>
</transition>

我的脚本：

data() {
    return {
        back: false,}
},

我的CSS：

/* Prev */
.slide-fade-enter-active {
    transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .3s ease;
}
.slide-fade-enter {
    transform: translateX(100px);
    opacity: 0;
}

.slide-fade-leave-to {
    transform: translateX(-100px);
    opacity: 0;
}

/* Next */
.slide-fade-reverse-enter-active {
    transition: all .3s ease;
}
.slide-fade-reverse-leave-active {
    transition: all .3s ease;
}
.slide-fade-reverse-enter {
    transform: translateX(-100px);
    opacity: 0;
}

.slide-fade-reverse-leave-to {
    transform: translateX(100px);
    opacity: 0;
}

我为此制造了一支钢笔：https://codepen.io/Tenarius/pen/WNwdEve

解决方法

为了使leave和enter过渡正常工作，<transition>元素必须具有v-if条件。当元素从false变为true时，该元素将插入DOM并根据enter过渡进行动画处理。当条件从true变为false时，将执行离开过渡，并在结束时将元素从DOM中删除。

但是，您没有这样的条件。您只是在更新卡中的内容，并期望将其从DOM中删除并替换为新的内容。

为了获得预期的功能，您应该使用一系列卡（仅包含当前活动的卡），并使用<transition-group>，该列表内部使用与transition相同的机制但是v-if的条件是元素是否是集合的一部分。

在您的情况下，“集合”将是一张过滤后的卡片列表，仅包含一张卡片。通过这种技术，leave元素将获得请假动画，而Entering元素将获得enter动画，因为根据模型的更改，元素实际上已被删除并添加到DOM中。

看到它工作here。

由于过渡需要离开并进入，因此元素必须“消失”并“重新出现”，因此setTimout可用于构建解决方法。

data() {
    return {
        back: false,loading: false
    }
},methods: {
    loadTimeout() {
        this.loading = true
        setTimeout(function(){
            this.loading = false
        }.bind(this),500);
    }
}

然后可以使用v-show="!loading"扩展卡，并且左右按钮必须调用loadTimeout()函数。

工作示例here

slide vue.js