Vue过渡:如何正确滑动？

Question

我有一个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,
    }
},

My 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

Answer 1

为了使leave和enter转换工作，<transition>元素必须有一个v-if条件。当元素从false变为true时，元素将被插入到DOM中，并根据enter转换进行动画化。当条件从true更改为false时，将执行离开转换，当其结束时，元素将从DOM中删除。

然而，你没有这样的条件。您只需更新卡片内容，并期望将其从DOM中删除并替换为新的内容。

为了实现预期的功能，您应该使用一个卡片列表(它只包含当前活动的卡)，再加上使用，后者内部使用与transition相同的机制，但是v-if的条件是元素是否是集合的一部分。

在您的例子中，“集合”将是一个过滤的卡片列表，只包含一张卡片。使用这种技术，离开元素将获得离开动画，而输入元素将获得enter动画，因为根据模型中的更改，元素实际上被移除并添加到DOM中。

看到它在运行这里。

Answer 2

由于转换需要离开和输入，因此元素必须“消失”和“重新出现”，因此可以使用setTimout来构建解决方案。

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

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

工作实例这里