vue动画

最新推荐文章于 2023-02-15 19:59:05 发布

***polestar

最新推荐文章于 2023-02-15 19:59:05 发布

阅读量328

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_42689147/article/details/88853023

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用过渡类名实现动画

.v-enter [这是一个时间点] 是进入之前，元素的起始状态，此时还没有开始进入

.v-leave-to [这是一个时间点] 是动画离开之后，离开的终止状态，此时，元素动画已经结束了

.v-enter-active [入场动画的时间段] .v-enter-active [出场动画的时间段]

说明：使用transition元素，把需要被动画控制的元素，包裹起来，例如：，transition元素，是vue官方提供的；自定义两组样式，来控制transition内部的元素实现动画

例如：

    <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 2s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <transition><h3 v-if="flag">这是一个H3</h3></transition>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        })
    </script>
</body>
</html>

使用自定义动画

例如：

<style>
        .my-enter,
        .my-leave-to {
            opacity: 0;
            transform: translateY(100px);
        }
        
        .my-enter-active,
        .my-leave-active {
            transition: all 2s ease;
        }
    </style>
<body>
    <div id="app">
        <input type="button" value="toggle2" @click="flag2=!flag2">
        <transition name="my">
            <h6 v-if="flag2">这是一个H3</h6>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag2: false
            },
            methods: {}
        })
    </script>
</body>

注意：transition添加了一个name属性

使用animated实现动画

首先需要下载animated.css的包，下载地址：animated.css

引入vue.js和animated.css的包

其中：:duration="毫秒值"来统一设置入场和离场时候的动画时长；使用 :duration="{ enter:200,leave:400}"来分别设置入场时长和离场时长

钩子函数的使用

模拟小球的半场动画例子

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小球半场动画</title>
    <!-- <script src="../lib/vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <style>
        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="button" value="快到碗里来" @click="flag=!flag">
        <!-- 1、使用transition元素把小球包裹起来 -->
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,
            },
            methods: {
                // 注意：动画钩子函数的第一个参数：el表示要执行动画的那个DOM元素，是个原生的JS DOM对象
                // 大家可以认为，el是通过document.getElementById('')方式获取到的原生的JS DOM对象
                beforeEnter(el) {
                    // 表示动画入场之前，此时动画尚未开始，可以在beforeEnter中，设置元素开始动画之前的起始样式
                    // 设置小球开始动画之前的起始位置
                    el.style.transform = "translate(0, 0)";
                },
                enter(el, done) {
                    //这句话没有实际的作用，但是，如果不写，出不来动画的效果
                    // 可以认为el.offsetWidth会强制动画刷新
                    // offsetLeft/offsetHeight/offsetTop等只要与offset有关的都可以达到相同的效果
                    el.offsetWidth;
                    // enter表示动画开始之后的样式，这里，可以设置小球完成之后的，结束状态
                    el.style.transform = "translate(150px, 450px)";
                    el.style.transition = 'all 1s ease';
                    //这里的done，其实就是afterEnter这个函数，也就是说：done是afterEnter函数的应用
                    done();
                },
                afterEnter(el) {
                    // 动画完成之后，会调用 afterEnter
                    this.flag = !this.flag;
                }
            }
        })
    </script>
</body>

</html>

动画-transition-group中appear和tag属性的作用

1、.v-move和.v-leave-active配合使用，能够实现transition-group所控制的元素渐渐地飘上来

2、在实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transition-group

3、如果要为v-for玄幻创建的元素设置动画，必须为每一个元素，设置 :key 属性

4、给transition-group添加appear属性，实现页面刚展示出来的时候，入场时候的效果

5、通过为transition-group元素，设置tag属性，指定transition-group渲染为指定的元素，如果不指定tag属性，渲染为默认的span标签

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表动画</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <style>
        li {
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 12px;
            width: 100%;
        }
        
        li:hover {
            background-color: blueviolet;
            transition: all 0.8s ease;
        }
        
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }
        
        .v-enter-active,
        .v-leave-active {
            transition: all 0.6s ease;
        }
        /* 下面的.v-move和.v-leave-active配合使用，能够实现列表后续的元素，渐渐地飘上来 */
        .v-move {
            transition: 0.6s ease;
        }
        .v-leave-active {
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <label for="">
                Id:
                <input type="text" v-model="id">
            </label>
            <label for="">
                    Name:
                    <input type="text" v-model="name">
            </label>
            <input type="button" value="添加" @click="add">
        </div>
        <ul>
            <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transitionGroup -->
            <!-- 如果要为v-for 循环创建的元素设置动画，必须为每一个元素 设置:key属性 -->
            <!-- 给transition-group添加appear属性，实现页面刚展示出来的时候，入场时候的效果 -->
            <!-- 通过为transition-group元素，设置tag属性，指定transition-group渲染为指定的元素，如果不指定tag属性，渲染为span标签 -->
            <transition-group appear tag="ul">
                <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                    {{item.id}}------{{item.name}}
                </li>
            </transition-group>

        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [{
                    id: 1,
                    name: '赵高'
                }, {
                    id: 2,
                    name: '秦桧'
                }, {
                    id: 3,
                    name: '严嵩'
                }, {
                    id: 4,
                    name: '魏忠贤'
                }]
            },
            methods: {
                add() {
                    this.list.push({
                        id: this.id,
                        name: this.name
                    });
                    this.name = this.id = '';
                },
                del(i) {
                    this.list.splice(i, 1);
                }
            }
        })
    </script>
</body>
</html>

***polestar

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue动画

使用过渡类名实现动画.v-enter [这是一个时间点] 是进入之前，元素的起始状态，此时还没有开始进入.v-leave-to [这是一个时间点] 是动画离开之后，离开的终止状态，此时，元素动画已经结束了.v-enter-active [入场动画的时间段] .v-enter-active [出场动画的时间段]说明：使用transition元素，把需要被动画控制的元素，包裹起来，...
复制链接

扫一扫