Vue.js 学习笔记（九）过渡与动画

最新推荐文章于 2024-09-12 16:43:23 发布

奥妙无穹

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量424

点赞数

分类专栏： Vue.js 文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/qq_44648936/article/details/123264266

版权

Vue.js 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在Vue.js中实现元素/组件的过渡效果，包括使用`transition`标签、过渡类名以及CSS过渡和动画。还展示了如何自定义过渡类名和使用CSS过渡钩子函数来实现复杂的动画效果。示例代码涵盖了基本的淡入淡出、缩放动画以及结合过渡和动画的使用方法。

摘要由CSDN通过智能技术生成

一、元素/组件过渡

transition标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
    <button v-on:click="show = !show">
        点我
    </button>
    <!--当插入或者删除包含在transition组件中的元素时，Vue会进行一系列处理-->
    <!--1、自动嗅探目标元素是否应用了CSS过渡或动画
        2、是否提供了钩子函数
        3、如果都没有，将立即执行-->
    <transition name="fade">
        <p v-if="show">动画实例</p>
    </transition>
</div>
<script>
    new Vue({
        el: '#demo',
        data: {
            show: true
        }
    })
</script>
</body>
</html>

二、使用过渡类实现动画

1、六个class

v-enter：定义进入过渡的开始状态
v-enter-active：定义进入过渡生效时的状态
v-enter-to：定义进入过渡的结束状态
v-leave：定义离开过渡的开始状态
v-leave-active：定义离开过渡生效时的状态
v-leave-to：定义离开过渡的的结束状态

2、CSS过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .v-enter{ /*这里是enter，指刚进入的状态*/
            /*opacity属性指定了一个元素的不透明度，0为完全透明，而1为完全不透明，默认为1*/
            opacity: 0;
        }
        /*表示3s后变化完全*/
        .v-enter-active{
            transition: opacity 3s;
        }
        /*注意这里的to，指最终要达到的效果*/
        .v-leave-to{
            opacity: 0;
        }
        .v-leave-active{
            transition: opacity 3s;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="show=!show">点我</button>
    <!--若transition存在name属性，则上面的v-enter等都要修改为相应的name，若wuname，则默认为v-->
    <transition >
        <!--在transition必须指定enter或者leave，不然不会变化-->
        <div v-if="show">Hello world</div>
    </transition>
    <div v-if="show">Hello world</div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            show: true
        }
    })
</script>
</body>
</html>

在这里插入图片描述

3、CSS动画

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .bounce-enter-active{
            /*animation表示动画
            CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。*/
            animation:bounce-in .5s;
        }
        .bounce-leave-active{
            /*reverse表示反过来*/
            animation:bounce-in .5s reverse;
        }
        /*通过 @keyframes 规则，您能够创建动画。*/
        @keyframes bounce-in{
            /*0%表示动画开始，scale(0)表示消失*/
            0%{transform:scale(0);}
            /*scale>1表示放大，scale<1表示缩小*/
            50%{transform:scale(1.5);}
            /*100%表示动画结束*/
            100%{transform:scale(1);}
        }
    </style>
</head>
<body>
<div id="app">
    <button v-on:click="show = !show">点我</button>
    <transition name="bounce">
        <p v-if="show">Hello World</p>
    </transition>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            show: true
        }
    })
</script>
</body>
</html>

动画和过渡同时使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .fade-enter,.fade-leave-to{
            opacity:0;
        }
        .fade-enter-active,.fade-leave-active{
            transition:opacity 1s;
            animation:bounce-in 5s;
        }
        @keyframes bounce-in{
            0%{transform:scale(0);}
            50%{transform:scale(1.5);}
            100%{transform:scale(1);}
        }
    </style>
</head>
<body>
<div id="app">
    <button v-on:click="show = !show">点我</button>
    <transition name="fade" type="transition">
        <p v-if="show">Hello World</p>
    </transition>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            show: true,
        },
    })
</script>
</body>
</html>

4、自定义过渡的类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .fade-in-active, .fade-out-active{
            transition: all 1.5s ease
        }
        .fade-in-enter, .fade-out-active{
            opacity: 0
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="show = !show">
        点我
    </button>
    <transition
            name="fade"
            <!--这里自定义，分别填上对应的类名即可-->
            enter-class="fade-in-enter"
            enter-active-class="fade-in-active"
            leave-class="fade-out-enter"
            leave-active-class="fade-out-active"
    >
        <p v-show="show">hello</p>
    </transition>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            show: true
        }
    })
</script>
</body>
</html>

5、CSS过渡钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--
Velocity 和 jQuery.animate 的工作方式类似,也是用来实现 JavaScript 动画的一个很棒的选择
-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>
<body>
<div id="app">
    <button @click="show = !show">
        点我
    </button>
    <transition
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:leave="leave"
            v-bind:css="false"
    >
        <p v-if="show">
            Hello
        </p>
    </transition>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            show: false
        },
        methods: {
            beforeEnter: function (el) {
                el.style.opacity = 0
                el.style.transformOrigin = 'left'
            },
            enter: function (el, done) {
                Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
                Velocity(el, { fontSize: '1em' }, { complete: done })
            },
            leave: function (el, done) {
                Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
                Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                Velocity(el, {
                    rotateZ: '45deg',
                    translateY: '30px',
                    translateX: '30px',
                    opacity: 0
                }, { complete: done })
            }
        }
    })
</script>
</body>
</html>