vue页面跳转添加动画

最新推荐文章于 2024-09-06 16:02:45 发布

Wg1xg

最新推荐文章于 2024-09-06 16:02:45 发布

阅读量528

点赞数

分类专栏： vue animate 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_46264539/article/details/115768084

版权

vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

animate

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中实现页面跳转时添加动画效果。首先，通过引入animate.css来提供动画样式。然后，创建一个混入mixin，用于在路由进入和离开时应用这些动画。最后，将混入应用到需要动画的组件中，从而实现平滑的页面过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入animate.css

在styles引入css样式文件,

@import "animate.css";

接着写一个动画

@keyframes enter {
    from {
        opacity: 0;
        transform: translateY(-10%)
    }

    to {
        opacity: 1;
        transform: translateY(0%)
    }
}
@keyframes leave {
    from {
        opacity: 1;
        transform: translateY(0%)
    }
    to {
        opacity: 0;
        transform: translateY(10%)
    }
}

.enter {
    animation: enter .6s;
}

.leave {
    animation: leave .6s;
}

写一个混入mixins，暴露后到需要的页面进行引用

export const animate = {
    data() {
        return {
            animateClass: "enter"
        }
    },
    beforeRouteEnter(to, from, next) {
        // this 取不到  路由进入之前  组件实例还未获取到  所以这里不要使用 this
        next();
    },
    beforeRouteLeave(to, from, next) {
        this.animateClass = "leave";
        setTimeout(() => {
            next();
        }, 400)
    }
}

使用方式

import { myMixin, animate } from "@/utils";
export default{
	mixins: [myMixin, animate],
}
//在html添加class
:class="animateClass"

这样就在进入路由和离开路由后添加动画了