Vue中动画transition标签的简单使用

最新推荐文章于 2024-05-23 19:22:50 发布

牛仔很会忙

最新推荐文章于 2024-05-23 19:22:50 发布

阅读量505

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_66970189/article/details/126976070

版权

transition

以下是代码展示，我们可以在router-view标签外套一个transition标签，这样我们在切换页面时就会有动画效果了

<template>
    <div class="containerView">
        <transition name="frame">
            <keep-alive> 
                <router-view class="containerView1"></router-view>
            </keep-alive>
        </transition>

    </div>
</template>
<script>
export default {
    created() {
        console.log(this.$route)
    }
}
</script>
<style lang="scss" scoped>
.frame-enter {
        transform: translateX(100%);
}

.frame-leave-to {
        transform: translateX(-100%);
}

.frame-enter-to,
.frame-leave {
        transform: translateX(0);
}

.frame-enter-active,
.frame-leave-active {
        transition: all .6s;
}
// 以下这一步的目的是，在切换时能保证首尾相连的效果
.containerView{
    position: relative;
    background-color: #fff;
    overflow: hidden;
    .containerView1{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
}

</style>