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

Vue.js 相关知识(动画)

程序员文章站 2022-05-04 10:23:57
1. 简介 Vue 在插入、更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:元素或组件(进入或离开时会有动画效果) ......

1. 简介

Vue 在插入、更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹)

语法:<transition name=””>元素或组件(进入或离开时会有动画效果)</transition>

name 属性是执行动画效果的 css 类名,与6个 css 类产生关联:

假设 transition 的 name为v,transition 组件会自动在不同时机添加如下6个类:

  • v-enter:定义过渡开始状态的样式
  • v-enter-active:定义过渡的状态,该类常被用来定义过渡的过程时间、延迟、曲线函数。
  • v-enter-to:定义过渡结束状态的样式(vue 2.1.8以上版本)
  • v-leave:定义离开之前的样式
  • v-leave-active:定义从0到1过程中的样式
  • v-leave-to:定义到达目的地之后的效果

Vue.js 相关知识(动画)

2. 执行动画的情况

动画只在2个节点发生:

  • 进入:从不显示到显示(v-show),从无到有。
  • 离开:从显示到不显示(v-show),从有到无。

条件渲染(使用v-if):根据条件控制元素添加、删除

条件展示(使用v-show):根据条件控制元素显示、隐藏

动态组件(使用:is):多个组件切换(涉及到组件显示、隐藏)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="vue.js"></script>    
    <style type="text/css">
        .v-enter{opacity: 0}
        .v-enter-to{opacity: 1}
        .v-enter-active{transition: all 1s}
        .v-leave{opacity: 1}
        .v-leave-to{opacity: 0}
        .v-leave-active{transition:all 1s}
    </style>
</head>
<body>
    <div id="app">
        <div class="title">
            <h3 @click="isshow=!isshow">标题</h3>
        </div>
        <transition name="v">
            <div class="content" v-show="isshow">
                <p>内容</p>
            </div>
        </transition>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:"#app",
            data:{
                isshow:true
            }
        })    
        app.$mount('#app')
    </script>
</body>
</html>

可将<style>中的内容简化为:

<style type="text/css">
  .v-enter,.v-leave-to{opacity: 0}
  .v-enter-active,.v-leave-active{transition: all 1s}
</style>

3. transition-group

  • 若给一个元素绑定动画效果,使用<transition>组件
  • 若给多个元素绑定动画效果,使用<transition-group>组件

为了区分元素列表,需要给子元素增加:key属性,表示每个子元素的索引

语法:<transition-group name=””> <元素1 :key=””></元素1> <元素2 :key=””></元素2> </transition-group>

4. 内置 css 类实现过渡

除在 transition 组件上增加 name 属性,来实现动画效果外,Vue还提供6个内置的类,可直接在transition组件上使用(为了兼容 animate.css 框架)

https://daneden.github.io/animate.css/

  • enter-class:相当于.v-enter
  • enter-active-class:相当于.v-enter-active
  • enter-to-class:(2.1.8之后)
  • leave-class
  • leave-active-class
  • leave-to-class:(2.1.8之后)

例:结合vue.js和animate.css动画框架实现一些动态效果

注:无需指定开始、结束状态时的css样式(animate.css中已指定)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="animate.css">
    <script type="text/javascript" src="vue.js"></script>    
    <style type="text/css">
        .dialog{
            width: 300px;
            height: 300px;
            background: #333;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="isshow=!isshow">按钮</button>
        <transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutUp">
            <div class="dialog" v-show="isshow">内容</div>
        </transition>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:"#app",
            data:{
                isshow:false
            }
        })            
    </script>
</body>
</html>

5. 钩子函数实现过渡

先指定不同阶段执行的js函数,在该函数中实现该阶段的css动画(通常结合 velocity.js、move.js 等JavaScript动画框架实现)。在钩子函数中,会自动将执行过渡效果的元素传递到钩子函数中。

语法:

<transition
  v-on:before-enter=”beforeEnter”
  v-on:enter=”enter”
  v-on:after-enter=”afterEnter”
  v-on:enter-cancelled=”enterCancelled”
  v-on:before-leave=”beforeLeave”
  v-on:leave=”leave”
  v-on:after-leave=”afterLeave”
  v-on:leave-cancelled=”leaveCancelled”> 
</transition>

例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.0/velocity.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>    
    <style type="text/css">
        .dialog{
            width: 300px;
            height: 300px;
            background: #333;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="isshow=!isshow">按钮</button>
        <transition v-on:before-enter="beforeEnter" v-on:enter="Enter">
            <div class="dialog" v-show="isshow">内容</div>
        </transition>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:"#app",
            data:{
                isshow:false
            },
            methods:{
                beforeEnter(el){
                    el.style.opacity = 0;
                },
                Enter(el){
                    Velocity(el,{opacity:1,fontSize:"2em"},{duration:1000})
                    Velocity(el,{backgroundColor:"#666"})
                }
            }
        })            
    </script>
</body>
</html>