Vue转换：如何正确滑行？

f4t66c6m 于 2023-08-07 发布在 Vue.js

关注(0)|答案(3)|浏览(84)

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

vue.js

来源：https://stackoverflow.com/questions/63765441/vue-transition-how-to-slide-correctly

3条答案

按热度按时间

0md85ypi1#

为了使leave和enter转换工作，<transition>元素必须具有v-if条件。当它从false更改为true时，该元素将被插入到DOM中，并根据enter转换进行动画。当条件从true变为false时，执行离开转换，当它结束时，从DOM中删除元素。
但你没有这样的条件。您只是更新了卡片的内容，并期望将其从DOM中删除并替换为新的内容。
为了实现预期的功能，你应该使用一个卡片列表（它只包含当前活动的卡片），再加上使用<transition-group>，在内部，它使用与transition相同的机制，但v-if的条件是元素是否是集合的一部分。
在您的例子中，“集合”是一个经过过滤的卡片列表，其中只包含一张卡片。使用这种技术，离开元素获得离开动画，而进入元素获得进入动画，因为根据模型中的更改，元素实际上被删除并添加到DOM中。
看到它工作here。

赞(0）回复(0）举报 2023-08-07

pcww981p2#

由于转换需要离开和进入，因此元素必须“消失”和“重新出现”，因此可以使用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

赞(0）回复(0）举报 2023-08-07

zvokhttg3#

我实现了这个，它正在工作：

// index.scss
$animation-duration: 0.15s;

.step-next-enter-active,
.step-next-leave-active,
.step-prev-enter-active,
.step-prev-leave-active {
  transition:
    transform #{$animation-duration} ease,
    opacity #{$animation-duration} ease;
}

.step-next-enter-from,
.step-prev-leave-to {
  transform: translateX(32px);
  opacity: 0;
}

.step-next-leave-to,
.step-prev-enter-from {
  transform: translateX(-32px);
  opacity: 0;
}

.step-next-leave-from,
.step-next-enter-to,
.step-prev-leave-from,
.step-prev-enter-to {
  transform: translateX(0);
}

个字符
希望能帮上忙！

赞(0）回复(0）举报 2023-08-07

我来回答

Vue转换：如何正确滑行？

3条答案

相关问题

热门标签

最新问答