vue 学习笔记（七）

1、初始渲染的过渡

    // 可以通过appear 特性设置节点在初始渲染的过渡。和进入/离开过渡一样，同样也可以自定义css类名，自定义钩子函数
<style>
            .slide-fade-enter-active {
              transition: all .3s ease;
            }
            .slide-fade-leave-active {
              transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
            }
            .slide-fade-enter, .slide-fade-leave-to
             {
              transform: translateX(50px);
              opacity: 0;
            }
            .custom-appear-class{
                transform: translateY(50px);
            }
</style>
<div id='example'>
            <button @click="show = !show">Toggle</button>
            <transition name='slide-fade' appear appear-class="custom-appear-class"  v-on:after-appear="customAfterAppearHook">
                    <p v-if="show">
                        Demo
                    </p>
            </transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
            new Vue({
                el: '#example',
                data: {
                    show: true
                },
                methods: {
                    customAfterAppearHook: function (el) {
                        el.style.color = 'red';
                    }
                }
            })
</script>

2、多个元素的过渡

// 对于原生标签可以使用v-if / v-else
<style>
            .slide-fade-enter-active {
              transition: all .3s ease;
            }
            .slide-fade-leave-active {
              transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
            }
            .slide-fade-enter, .slide-fade-leave-to
             {
              transform: translateX(50px);
              opacity: 0;
            }
</style>
<div id='example'>
                <button @click="flag=!flag">toggle</button>
                <br />
                <transition name='slide-fade'>
                    <span v-if='flag'>显示内容</span>
                    <p v-else>Sorry ,no items found.</p>
                </transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
            new Vue({
                el: '#example',
                data: {
                    flag:true
                },
                methods: {

                }
            })
</script>


//注：当有相同标签的元素切换时，需要通过key特性设置唯一的值来标记vue区分他们，否则vue为了效率只会替换相同
// 标签内部的内容。 给在transition 组件中的多个元素设置key是一个更好的实战。

<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>

3、过渡模式

transition的默认行为是：进入和离开同时发生，可以设置默认行为
a.in-out:新元素先进行过渡，完成之后当前元素过渡离开，
b.out-in:当前元素先进行过渡，完成之后新元素过渡进入。

<transition name="fade" mode="out-in">

</transition>

4、多个组件的过渡

// 多个组件的过渡，不需要使用key特性，只需要使用动态组件即可：
<style>
.component-fade-enter-active,.component-fade-leave-active {
         transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to{
        opacity: 0;
}
</style>
<div id='example'>
                <label for="">组件a:<input type="radio" name='view' value="v-a" v-model="view"></label>
                <label for="">组件a:<input type="radio" name='view' value="v-b" v-model="view"></label>
                <transition mode='out-in' name='component-fade'>
                    <component   v-bind:is='view'></component>
                </transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
        new Vue({
                el: '#example',
                data: {
                    view:'v-a'
                },
                components: {
                    'v-a': {
                        template: '<div>Component a</div>'
                    },
                    'v-b': {
                        template: '<div>Component b</div>'
                    }
                }
        })
</script>

5、列表过渡

使用v-for 渲染列表时，过渡使用transition-group组件。这个组件的特点：
a.不同于transition,它会以一个真实元素呈现，默认为一个span，你也可以通过tag特性更换为其他元素。
b.内部元素总是需要提供唯一的key属性值

6、列表的进入/离开过渡

// 例如：
<style>
            .list-item{
                display: inline-block;
                margin-right: 10px;
            }
            .list-enter-active,.list-leave-active{
                transition: all 1s;
            }
            .list-enter,.list-leave-to{
                opacity: 0;
                transform: translateY(30px);
            }
</style>
<div id='example'>
            <button v-on:click="add">add</button> 
            <button v-on:click='remove'>remove</button>
            <transition-group name="list" tag='p'>
                <span v-for='item in items' v-bind:key='item' class='list-item'>
                    {{item}}    
                </span>
            </transition-group>
        </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
            new Vue({
                el: '#example',
                data: {
                    items: [1,2,3,4,5,6,7,8,9],
                    nextNum: 10
                },
                methods: {
                    randomIndex: function () {
                        return Math.floor(Math.random()*this.items.length);
                    },
                    add: function () {
                        this.items.splice(this.randomIndex(), 0, this.nextNum++);
                    },
                    remove: function () {
                        this.items.splice(this.randomIndex(),1);
                    }
                }
            })
</script>