欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

vue中的动画

程序员文章站 2022-03-16 18:58:22
...

使用过渡类名实现

1.使用<transition>标签包裹起需要动画的元素

2.设置类样式

3.通过在<transition>标签中添加name属性修改类样式中v-前缀用于区分不同动画

<transition name=" my ">

.my-enter,

.my-leave-to{

}   ……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .v-enter,
        .v-leave-to{
            opacity:0;
            transform: translateX(150px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.8s;
        }
    </style>
</head>
<body>
<div class="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <transition>
        <h3 v-show="flag">动起来</h3>
    </transition>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            flag:false
        }
    })
</script>
</body>
</html>

使用animate.css第三方库实现

animate.css官方文档

  1.  引入文件（animate.css）
  2.   在<transition>标签中 添加 enter-active-class(进入时的动画)，leave-active-class(离开时的动画) ， :duration(时长) 等属性。其中 enter-active-class="库中的类名"   :duration="毫秒值"属性可忽略
  3. 在要做动画的元素中添加class="animated"属性
    <link href="../lib/animate.css" rel="stylesheet">
<div class="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <transition enter-active-class="rollIn" leave-active-class="rollOut">
        <h3 v-show="flag" class="animated">动起来</h3>
    </transition>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            flag:false
        }
    })
</script>

使用钩子函数自定义动画效果

说明：

<!--绑定事件处理函数，进入事件，还有离开事件（自选），离开事件只需要把enter改成leave即可-->    
    <transition
            @before-enter="beforeEnter"   
            @enter="enter"               
            @after-enter="afterEnter">   
    </transition>
<script>
    var vm = new Vue({
        data:{
            flag = false
        },
        methods: {
            beforeEnter(el){
                el.style.transform = 'translate(0, 0)'
            },
            enter(el,done){
                el.offsetLeft;  //必须加上offset属性，不然不会出现动画
                el.style.transform = 'translate(150px,200px)';
                el.style.transition = 'all 0.8s';
                done();  //也就是afterEnter函数，调用下一个函数，最好加上，保证出现bug
            },
            afterEnter(el){
                this.flag = !this.flag
            }
        }
    })
</script>

使用实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .qiu {
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="app">
    <input type="button" value="快到碗里来" @click="flag=!flag">
    <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter">
        <div class="qiu" v-if="flag"></div>
    </transition>
</div>


<script src="../lib/vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            flag: false
        },
        methods: {
            beforeEnter(el){
                el.style.transform = 'translate(0, 0)'
            },
            enter(el,done){
                el.offsetLeft;
                el.style.transform = 'translate(150px,200px)';
                el.style.transition = 'all 0.8s';
                done();
            },
            afterEnter(el){
                this.flag = !this.flag
            }
        }
    })
</script>
</body>
</html>

 

使用transition-group标签实现列表动画

注意：在使用列表过渡效果的时候，是通过v-for循环渲染出来的，不能使用transition标签包裹需要做动画的元素，而是应该使用transition-group标签

transition-group标签中添加appear属性，实现页面入场时的效果

transition-group标签中添加tag="标签名（ul）"属性，指定transition-group渲染为指定的元素（ul），如果不指定，默认为span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            border: 1px dashed #999;
            line-height: 40px;
            margin: 5px;
            padding-left: 10px;
            width: 100%;
        }

        li:hover {
            background-color: hotpink;
        }

        .v-enter,
        .v-leave-to{
            opacity:0;
            transform: translateY(80px);
        }
        .v-enter-active,
        .v-leave-active{
            transition:all 0.8s;
        }

        /*点击时删除的过渡动画效果Start*/
        .v-move{
            transition:all 0.8s;
        }
        .v-leave-active{
            position: absolute;
        }
        /*点击时删除的过渡动画效果end*/
    </style>
</head>
<body>
<div class="app">
    <div>
        <label>
            id:
            <input type="text" v-model="id">
        </label>
        <label>
            name:
            <input type="text" v-model="name">
        </label>
        <input type="button" value="添加" @click="add">
    </div>
        <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>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            id: '',
            name: '',
            list: [
                {id: 1, name: '马云'},
                {id: 2, name: '马化腾'},
                {id: 3, name: '李彦宏'}
            ]
        },
        methods: {
            add(){
                this.list.push({id: this.id, name: this.name});
                this.id = this.name = '';
            },
            del(i){
                this.list.splice(i,1);
            }
        }
    })
</script>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

相关标签： vue animate.css

上一篇： Animate.css 使用教程（一个强大的 CSS3 动画库）

下一篇： Vue基础之侦听器详解

推荐阅读