Vue——关于css过渡和动画那些事

1. 单元素/组件的过渡transition

　　Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

实例：

<div id="app">
                           
        
show
    
    change

2. 过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换：v-enter 、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to

关于过渡类名：

　　如果你使用一个没有名字的 ，则 v-是这些类名的默认前缀。

　　如果你使用了 ，那么 v-enter 会替换为 my-transition-enter

3. 关于@keyframe 动画 （此处省略）

4. VUE中使用第三方animate.css 库,  （animate.css库提供的动画是@keyframe的Css3的动画） 

　　首先link引入animate.css，然后结合自定义过渡的类名  enter-active-class、leave-active-class，

　　animated是必须要写的，hinge shake是引入的动画效果

    animated hinge" leave-active-class="animated shake">
        
show
    
    change

<script>
    new Vue({
        el: '#app',
        data:{
            show: true
        },
        methods:{
            handleChange:function(){
                this.show = !this.show;
            }
        }
    })
script>

 5. 如何在页面加载完成后元素第一次显示时也具备动画效果？

　　使用appear 和 appear-active-class

    appear 
        enter-active-class="animated swing fade-enter-active" 
        leave-active-class="animated shake fade-leave-active"
        appear-active-class="animated swing">
    
show
    
    change

 6. 同时使用过渡和动画

<style>
    .fade-enter,.fade-leave-to{
        opacity: 0;
    }
    .fade-enter-active,
    .fade-leave-active{
        transition: opacity 3s;
    }
style>

    :duration="{enter:5000, leave:10000}"  //duration设置动画时间
                name="fade"
                appear 
                enter-active-class="animated swing fade-enter-active" 
                leave-active-class="animated shake fade-leave-active"
                appear-active-class="animated swing">
        
show
    
    change

 7. Vue中多个元素或组件的过渡

• 多个元素的过渡

先上例子：2个元素切换过渡效果

<style>
    .v-enter,.v-leave-to{
        opacity: 0;
    }
    .v-enter-active,.v-leave-active{
        transition: opacity .5s;
    }
style>

<div id="app">


    <transition mode="out-in">
        <div v-if="show" key="hello">hello vuediv>
        <div v-else key="Bye">Bye Vuediv>
    transition>
    <button @click="handleClick">changebutton>
div>

<script>
    var vm = new Vue({
        el: '#app',
        data:{
            show: true
        },
        methods:{
            handleClick:function(){
                this.show = !this.show;
            }
        }
    })
script>

• 多个组件的过渡

<style>
    .v-enter,.v-leave-to{
        opacity: 0;
    }
    .v-enter-active,.v-leave-active{
        transition: opacity .5s;
    }
style>

<div id="app">
    <transition mode="in-out">


    <component :is="type">component>
    transition>
    <button @click="handleClick">changebutton>
div>

<script>
    Vue.component('child',{
        template: '
child'
    });
    Vue.component('child-one',{
        template: '
child-one'
    })
    var vm = new Vue({
        el: '#app',
        data:{
            type: 'child'
        },
        methods:{
            handleClick:function(){
                this.type = (this.type === 'child'?'child-one' : 'child');
            }
        }
    })
script>

 8. 列表过渡使用  transition-group

<div id="app">
    <transition-group>
    <div v-for="item  of list" :key="item.id">
        {{item.title}}-{{item.id}}
    div>
    transition-group>
    <button @click="handleAdd">Addbutton>
div>

<style>
    .v-enter,.v-leave-to{
        opacity: 0;
    }
    .v-enter-active,.v-leave-active{
        transition: opacity 1s;
    }
style>

<script>
    var count = 0;
    new Vue({
        el: '#app',
        data:{
            list:[]
        },
        methods:{
            handleAdd:function(){
                this.list.push({
                    id: count++,
                    title: 'hello vue'
                })
            }
        }
    })
script>

 

转载于:https://www.cnblogs.com/ly2646/p/9469551.html