当前位置: 首页 > 工具软件 > Velocity.js > 使用案例 >

vue动画 css (animate.css) js(velocity.js)

雷献
2023-12-01

1、动画实现的方式: ------动画在vue上的应用,实现过渡效果

(1)css3:transition、 animation、animate.css(框架)

(2)js:jQuery、$animation({},{}) (框架);velocity 、 Velocity(el,{},{})  (框架)

 

(1)使用css3技术实现:

  1. 原生css3:<transition>在渲染完毕之后是不存在的,div中会由vue添加一些样式

自定义过渡样式:通过transition组件,可以给任何元素和组件添加过渡;

条件渲染(使用v-if)、条件展示(使用v-show)、动态组件、组件根节点过渡类名

.v-enter(开始进入)

.v-enter-to(进入结束)

.v-enter-active(.v-enter到.v-enter-to的整个过程)

 

.v-leave(开始出去)

.v-leave-to(出去结束)

.v-leave-active(.v-leave到.v-leave-to的整个过程)

 

<script src="../js/vue.js"></script>

    <style>

        /* 过程 */

        .v-enter-active,.v-leave-active{

            transition: opacity 2s;

        }

        /*进入结束  开始出去  */

        .v-enter-to,.v-leave{

            opacity: 1;

        }

        /*开始进入   出去结束*/

        .v-enter,.v-leave-to{

            opacity: 0;

        }

 

    </style>

</head>

<body>

    <div id="app">

        <button @click='show = !show'>切换</button>

        <!--使用tansition组件进行过渡变换  -->

(1)方法1:

        <transition>

        <div v-show='show'>

            <h2>css3动画</h2>

            <p>这是一个动画</p>

        </div>

        </transition>

(2)方法2:

<div is=’transition’>

        <div v-show='show'>

            <h2>css3动画</h2>

            <p>这是一个动画</p>

        </div>

        </div>

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                show:true,

            }

        })

    </script>

 

 

  1. 自定义过渡的类名:优先级高于普通的类名,这对于Vue的过度系统和其他第三方CSS动画库,如Animate.css结合使用十分有用。

框架 animate.css  :官网https://daneden.github.io/animate.css/

进入:enter-class   enter-to-class     enter-active-class

离开:leave-class   leave-active-class  leave-to-class

  <script src="../js/vue.js"></script>

    <!--引入animate框架  -->

    <link rel="stylesheet" href="../css/animate.css">

    

</head>

<body>

    <div id="app">

        <button @click='show = !show'>切换</button>

 

        <!--使用tansition组件进行过渡变换  两个参数 -->

        <transition enter-active-class='animated bounce'

leave-active-class='animated rollOut'>

            

        <div v-show='show'>

            <h2>css3动画</h2>

            <p>这是一个动画</p>

        </div>

        </transition>

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                show:true,

            }

        })

    </script>

 

(2)使用JS技术实现(使用事件钩子实现动画(<transition>))

  1. 引入jQuery方法(animate):

before-enter、enter、after-enter

before-leave 、leave、after-leave

  1. 引入动画库velocity.min.js和插件velocity.ui.js:效率比animate.css、css3和jQuery高

      enter:function(el,done){

        $(el).animate({},{})

        //velocity

        Velocity(el,{},{})

        //velocity.ui

        Velocity(el,'',{})

      }

 

1、引入jQuery方法:

<script src="../js/vue.js"></script>

    <!--引入animate框架  -->

    <script src="../js/jquery-3.0.0.min.js"></script>    

</head>

<body>

    <div id="app">

        <button @click='show = !show'>切换</button>

 

        <!--使用js技术实现动画 -->

        <transition @enter='enter' @leave='leave'>   <!--绑定动画  -->

            

        <div v-show='show'>

            <h2>css3动画</h2>

            <p>这是一个动画</p>

        </div>

        </transition>

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                show:true,

            },

            // 操作动画事件

            methods:{  

                enter:function(el,done){

                    // el:当前dom,done:回调函数(当动画结束后执行

                    // 不能直接选取dom,因为经过vue加工后的dom位置不确定

                    $(el).animate({

                        opacity:1 //参数1:加样式

                    },{

                        duration:1000, //参数2:样式持续的时间

                        complete:done

                    })

 

                },

                leave:function(el,done){

                    $(el).animate({

                        opacity:0 //参数1:加样式

                    },{

                        duration:1000, //参数2:样式持续的时间

                        complete:done

                    })

                }

            }

        })

</script>

 

 

2、 引入velocity.min.js和velocity.ui.js

<script src="../js/vue.js"></script>

    <!--引入velocity组件  -->

    <script src="../js/velocity.min.js"></script>    

    <script src="../js/velocity.ui.js"></script>

</head>

<body>

    <div id="app">

        <button @click='show = !show'>切换</button>

 

        <!--使用js技术实现动画 -->

        <transition @enter='enter' @leave='leave'>   <!--绑定动画  -->

            

        <div v-show='show'>

            <h2>css3动画</h2>

            <p>这是一个动画</p>

        </div>

        </transition>

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                show:true,

            },

            // 操作动画事件

            methods:{  

                enter:function(el,done){

                    // el:当前dom,done:回调函数(当动画结束后执行

                    // 不能直接选取dom,因为经过vue加工后的dom位置不确定

                    Velocity(el,"callout.bounce",{

//参数1:当前dom;参数2:样式(使用velocity的样式,不要自己写)

                        duration:1000, //参数3:样式持续的时间

                        complete:done

                    })

 

                },

                leave:function(el,done){

                    Velocity(el,"callout.swing",{

                        duration:1000, //参数3:样式持续的时间

                        complete:done

                    })

                }

            }

        })

    </script>

 

(3)多个元素的渲染效果(使用<transition-group>组件):不同于<transition>,它会以一个真实元素呈现:默认为一个<span>;通过tag特性更换为其他元素;内部元素总是需要提供唯一 key属性值(看下面的学生管理系统的例子)

<script src="../js/velocity.min.js"></script>    

<script src="../js/velocity.ui.js"></script>

1)方法1:默认转换为一个span标签,tag将其最终渲染成ul标签

< transition-group  tag=’ul’ @enter=’enter’  @leave=’leave’>

<li v-for=’item in nameList’ :key=’item.name’>{{item.name}}</li>

</transition>

2)方法2:这里不能使用<transition>标签,因为是在table里不能没有<tbody>

<tbody is= transition-group tag=’tbody’ @enter=’enter’  @leave=’leave’>

<tr v-for=’item in studentList’ :key=’item.id’>

<td>

</td>

</tr>

</tbody>

 

 

 

学生管理系统:(第二版:有模糊查询+离开进入的动画)

<!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>Document</title>

    <script src="../js/vue.js"></script>

    <script src="../js/velocity.min.js"></script>

    <script src="../js/velocity.ui.js"></script>

</head>

<body>

    <div id="app">

        <table>

            <h3>{{title}}</h3>

            <hr>

            <!--进行双向数据绑定  -->

            <input type="search" placeholder="请输入关键字" v-model='keywords'>

            <thead>

                <tr>

                    <th>选项</th>

                    <th>姓名</th>

                    <th>年龄</th>

                    <th>性别</th>

                </tr>

            </thead>

            <!--多元素渲染效果:这里不能使用<transition>标签,因为是在table里不能没有<tbody>  -->

            <tbody is='transition-group' tag='tbody' @enter='enter' @leave='leave'>

                <!--该填为筛选之后的学生列表  key唯一指定id属性-->

                <tr v-for='item in studentList' :key='item.id'> 

                    <td><input type="checkbox" :value='item.id'> </td>

                    <td>{{item.name}}</td>

                    <td>{{item.age}}</td>

                    <td>{{item.gender}}</td>

                </tr>

            </tbody>

        </table>

        <div>

            <button>添加</button>

            <button>删除</button>

            <button>修改</button>

        </div>

    </div>

    <script>

        var app=new Vue({

            el:'#app',

            methods:{

                // 使用velocity添加元素离开的和进来的动画:

                enter:function(el,done){ //此参数必须传入

                    Velocity(el,'transition.bounceLeftIn',{

                        computed:done,

                        duration:1000

                    })

                },

                leave:function(el,done){

                     Velocity(el,'transition.bounceLeftOut',{

                        computed:done,

                        duration:1000

                    })

                }

            },

            computed:{

                studentList:function(){ //筛选学生,实现模糊查询

                    var vm =this;//this指向vue对象,做一个跳板

                    return this.students.filter(function(item){

                        // return true; //还是返回整个学生列表

                        // console.log(this)//指向window

                        return item.name.indexOf(vm.keywords) !== -1;

                        //按名字进行模糊查询,找不到相应值返回-1

                    });

                }

            },

            data:{

                keywords:'',   //实现双向数据绑定

                title:'学生信息管理系统', //实现文本的渲染

                students:[{ //模拟数据

                    id:1,

                    name:'tom',

                    age:12,

                    gender:'男',

                },{

                    id:2,

                    name:'lili',

                    age:13,

                    gender:'男',

                },{

                    id:3,

                    name:'jecky',

                    age:12,

                    gender:'男',

                },{

                    id:4,

                    name:'lucy',

                    age:12,

                    gender:'女',

                },{

                    id:5,

                    name:'nana',

                    age:12,

                    gender:'女',

                }]

 

            }

        })

    </script>

</body>

</html>

 

 类似资料: