Vue过渡动画

最新推荐文章于 2021-02-24 15:17:53 发布

哈喽雷雷

最新推荐文章于 2021-02-24 15:17:53 发布

阅读量160

点赞数

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

本文链接：https://blog.csdn.net/qq331300729/article/details/108532178

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

查看详细原文

起始

Vue有一个内置的组件可以实现过渡的效果，在插入和更新或移除dom时，会提供多个不同的过渡效果，有进入、离开两个阶段，每个阶段分别有3个过渡效果

进入：

v-enter

进入过渡开始的状态；元素进入前生效，元素插入后的下一帧移除

v-enter-active

进入过渡进行时的状态；在整个过渡过程中应用，元素插入前生效，在过渡效果完成后移除。

v-enter-to

进入过渡结束的状态；元素进入后下一帧生效（同时v-enter被移除），在过渡效果完成后移除

离开：

v-leave

离开过渡开始的状态；离开时立刻生效，下一帧被移除。

v-leave-active

离开过渡进行时的状态；在整个过渡过程中应用，离开时立刻生效，在过渡效果完成后移除。

v-leave-to

离开过渡结束的状态；被离开后下一帧生效，（同时v-leave被删除），在过渡效果完成后移除

写法

添加transition标签

在需要过渡的元素外层写一个transition标签，并且设置name属性

<transtion name="test">
    <div>我是需要过渡的元素</div>
</transtion>

样式

class命名规范.[name]-enter，

<style>
    .test-enter {
        /*进入前生效的样式*/
    }
    .test-enter-active {
        /*进入阶段进行时的样式*/
    }
    .test-enter-to {
        /*进入过程的结束样式*/
    }
    .test-leave {
        /*离开过程开始的样式*/
    }
    .test-leave-active {
        /*离开阶段进行时的样式*/
    }
    .test-leave-to {
        /*离开过程的结束样式*/
    }
</style>

demo

点击显示后圆变大，变小后隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: #000000;
            border-radius: 50%;
        }

        .test-enter {
            /* 进入过渡开始状态 */
            width: 100px;
            height: 100px;
            background: red;
        }

        .test-enter-active {
            /* 进入的过程状态 */
            transition: all .3s linear;
        }

        .test-enter-to {
            /* 进入过渡的结束状态，写不写都可以，一般情况下都和默认显示的样式是一样的*/
            width: 200px;
            height: 200px;
        }

        .test-leave {
            /* 离开过渡的开始状态，写不写都可以，一般情况下都和默认显示的样式是一样的*/
            width: 200px;
            height: 200px;
        }

        .test-leave-active {
            /* 离开的过程状态 */
            transition: all .3s linear;
        }

        .test-leave-to {
            /* 离开过渡结束状态 */
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="btn()">click</button>
        <transition name="test">
            <div class="box" v-show="isShow"></div>
        </transition>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods: {
                btn() {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

</html>

哈喽雷雷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue过渡动画

查看详细原文起始Vue有一个内置的组件可以实现过渡的效果，在插入和更新或移除dom时，会提供多个不同的过渡效果，有进入、离开两个阶段，每个阶段分别有3个过渡效果进入：v-enter进入过渡开始的状态；元素进入前生效，元素插入后的下一帧移除v-enter-active进入过渡进行时的状态；在整个过渡过程中应用，元素插入前生效，在过渡效果完成后移除。v-enter-to进入过渡结束的状态；元素进入后下一帧生效（同时v-enter被移除），在过渡效果完成后移除离..
复制链接

扫一扫

专栏目录