用最简单的css 来实现vue的转场动画

最新推荐文章于 2024-04-25 16:16:15 发布

有趣的前端

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量591

点赞数 3

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

本文链接：https://blog.csdn.net/wys997/article/details/107761633

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

效果:
在这里插入图片描述
app里的代码:

<transition name="slide-fade">

            <router-view/>
        </transition>

在这里插入图片描述

css代码:

写在app的style标签中

<style>
 .slide-fade{
        position: fixed;left:0;right: 0;
        width: 100%;
        background-color: white;
    }
    .slide-fade-enter, .slide-fade-leave-to
    {
        left:0;top: 0;right: 0;
        position: absolute;
        transform:translateX(-500px) translateY(-500px) rotate(-150deg) scale(0.5);
        opacity:1;
    }
    .slide-fade-enter-active {
        background-color: white;
        transition: all 0.6s ease;
    }
    .slide-fade-leave-active {
        transition: all 0.7s ease;
        background-color: white;
        transform:translateX(500px) translateY(500px) rotate(150deg) scale(1) ;
        z-index: 100;
    }
  </style>