vue3 transition

Defination

Component

transition

transition-group

Defination(for all)

Describing how * an element * transfer from invisible to present.

Distinction

Component transition only with a displaying element inside .Means that you can use v-if/v-show

Component transition-group with elememt s inside that genderated by v-for and reuse the same set of transition rule. All are individual.

---

Usage

• named class : v-enter-active ,etc
• attributes refer to particular css,which have higher prority than named class, for integer 3-rd css libraries.(Its effect would cover named class)
• hooks ：@before-enter ，@enter ，@after-ener，@enter-cancelled.

Attributes

1. type=‘transition/animation’ 。if your element has css animation triggered by vue along with css transition trigger by hover ,you can tell vue @transitionend or @animationend which you want to use by this attribute
2. mode=‘in-out / out-in’ .this used when swith 2 element in transition tag.New element comeout first or previous element disappear first?
3. : key =‘xx’
4. :is =‘component name’ dynamic component
5. :css = ‘fasle’ * unknown *
6. v-move = ‘xxx’ *use it when you use transition-group,it describes how elements relative to each other transform their position *
7. tag =‘whatever’ *what is the transition-group tag rendered as *

---

…
有几个属性不懂

1. :css=false
2. type=‘animation/transition’

type

过度组件起作用的流程：

1. 检测element用了 css的Transition还是Animation。根据检测结果，在合适的时机 +/- 合适的类名（v-enter-active ,etc）
2. 如果 有@before-enter , @after-enter 等钩子，会在适宜时间点上调用
3. 如果vue既没有检测到 Transition/Animation ，有没有检测到上一步提及的钩子。则element立马出现或者小时，没有过度效果。

那么，type？
…
条件：当mode=‘out-in’
4. 菜鸡怕看源码，简单测试了下。发现，type的值会告诉vue，element会使用transitoin还是animation来表现过度。
5. 如果element使用了animation，但是type的值是transition的话，vue会找不到过度，直接就没有过度效果***（？？hook？）***
6. 如果element身上有应用Animation（花费3秒）作为过度，也有应用transition（花费6秒）在hover时生效，而type是transiton的话，过度的时候仍然是animation，只是一个动画开始后6s，才会执行这个过度的@after-leave，才会播放下一个过度（比方说新元素出现时的过度）
…
也就是说，vue找到type值指向的过度，没有就没有，就就拿秒数，然后根据时间拍好动画队列，以安排每个过度效果的开始显示时机 和 钩子的执行时机。
但是具体每个效果怎么显示，显示的时间，css中已安排好了。
所以type值是根据检测时间来安排 各个过度效果的 次序，各个过渡效果自定义……

栗子 ↓

<template>
    <button @click="convert">switch</button>
    <transition 
        name='trigger' 
        mode="out-in" 
        type="animation"
        @before-leave='log("before leave")'
        @leave='log("leaving")'
        @after-leave='log("after leave")'

        @before-enter='log("before enter")'
        @enter='log("entering")'
        @after-enter='log("after enter")'
        >
        <div class="trigger"  :key="text">
            {{computedText}}
        </div>
    </transition>
</template>
<script lang="ts">
import {Vue } from 'vue-class-component';

let key: number;
export default class App extends Vue{
    text = 1;

    convert(){
        this.text =+(!Boolean(this.text))

        clearInterval(key);
        key=setInterval(function(){
            console.log('1');
        },1000);
        setTimeout(() => {
            clearInterval(key)
        }, 7000);
    }
    log(mes: string){
        console.log(mes)
    }
    get computedText(){
        return (this.text+'').repeat(3)
    }
}
</script>
<style lang='scss'>
    .trigger{
        /* 
            1.transition 上的type值，会在该元素身上找对应transition/animation 的秒数。
            2.如果找不到type值对应的秒数，会立马变化而没有过度效果。
            3.找到的话，
            4.实际生效的每个过度时间（单指enter / leave 的时间花费）为3.找到的秒数。
            -----
            此属性写在.trigger:hover上的话，
            会变成 上面 2.  的结果
            ------
            综上所述，vue通过type属性，在将要产生过度的.trigger 元素上找所要的，.trigger:hover 就是另一个元素了
         */
         animation-duration: 6s;
        &:hover{
            animation-name: colour;
            animation-fill-mode: forwards;
            // animation-duration: 6s; 
        }
    }
    .trigger-leave-active,.trigger-enter-active{
        transition:all 1s ;
    }
    .trigger-enter-from,.trigger-leave-to{
        opacity:0;
    }
    .trigger-leave-from,.trigger-enter-to{
        opacity:1;
    } 
    @keyframes colour {
        from {
            color:black;
        }
        to{
            color: red;
        }
    }
</style>