其他分享
首页 > 其他分享> > VUE学习笔记--过渡与动画

VUE学习笔记--过渡与动画

作者:互联网

Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/ 离开过渡。
条件渲染 (使用 v-if)。
条件展示 (使用 v-show)。
动态组件。
组件根节点。
语法格式如下:

<transition name = "nameoftransition">
   <div></div>
</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 name="fade">
        <p v-if="show">动画实例</p>
    </transition>
</div>
<script>
    new Vue({
        el: '#demo',
        data: {
            show: true
        }
    })
</script>
</body>
</html>
当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理:

自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删 除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。 
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作 (插 入/删除) 在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和 Vue 的 nextTick 概 念不同)。
过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中,提供了 6 个 class 来切换:

对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>,则 v- 是 这些类名的默认前缀。例如你使用了 <transition name="my-transition">,那么 v-enter 会替换 为 my-transition-enter。 
      常用的 Vue 过渡效果都是使用 CSS 过渡 transition。我们首先看一个简单的切换显示按 钮,代码如下:
<div id="app"> 
      <button @click="show=!show">点我</button> 
            <div v-if="show">Hello world</div> 
</div> 
<script> 
      new Vue({ 
             el: '#app', 
             data: { 
                  show: true 
               } 
      })  
</script>
<!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{
            opacity: 0;
        }
        .v-enter-active{
            transition: opacity 3s;
        }
        .v-leave-to{
            opacity: 0;
        }
        .v-leave-active{
            transition: opacity 3s;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="show=!show">点我</button>
    <transition >
        <div v-if="show">Hello world</div>
    </transition>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            show: true
        }
    })
</script>
</body>
</html>
 当然只是这样也是无法形成过渡效果的。仍需在 transition 标签中添加 class 样式,只不过 class 样式不需要我们手动添加,Vue 在运行中会自动的构建一个动画的流程
当动画执行的一瞬间,会自动在 div 上增加两个 class 名字,分别是 fade-enter 和 fade-enter-active,因为 transiton 标签 name 是 fade。 
       当动画运行到第二帧时,Vue 又会把 fade-enter 删除,然后添加一个 fade-enter-to,再当动画执行到结束的一瞬间,又把 fade-enter-active 和 fade-enter-to 删除掉。

 

 

CSS动画animation用法同CSS过渡transition,区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除

<!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>
        .bounce-enter-active{
            animation:bounce-in .5s;
        }
        .bounce-leave-active{
            animation:bounce-in .5s reverse;
        }
        @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="bounce">
        <p v-if="show">Hello World</p>
    </transition>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            show: true
        }
    })
</script>
</body>
</html>
Vue 为了知道过渡的完成,必须设置相应的事件监听器。它可以是 transitionend 或 animationend ,这取决于给元素应用的 CSS 规则。如果使用其中任何一种,Vue 能自动识 别类型并设置监听。

在一些场景中,需要给同一个元素同时设置两种过渡动效。
<!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>
我们可以通过以下特性来自定义过渡类名:

enter-class 
enter-active-class  
leave-class 
leave-active-class

他们的优先级高于普通的类名,这对于 Vue 的过渡系统和其他第三方 CSS 动画库, 如 Animate.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>
        .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>
除了用CSS过渡的动画来实现Vue的组件过渡,还可以用JavaScript的钩子函数来实现,在钩子函数中直接操作DOM。可以在属性中声明 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 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>

 

标签:动画,VUE,el,--,Vue,fade,enter,active
来源: https://www.cnblogs.com/tszr/p/15416638.html