<!--模板-->
<template>
    <div name="users">
        <hr>
        <button @click="showHide">按鈕</button>
        <!--此標籤可以在動畫樣式中去規定動畫樣式-->
        <transition name="fade">
            <p v-if="show">顯示與隱藏</p>
        </transition>
    </div>
</template>
<!--行為-->
<script>
    export default {
        name: 'users',
        data () {
            return {
                show:true
            }
        },
        methods:{
            showHide:function(){
                this.show = !this.show;
            }
        }
    }
</script>
<!--樣式-->
<style>
    
    /*這裡是 opacity 從0-1 的過程(從無到有的過程)*/
    .fade-enter{    /*4:過渡開始時(從無到有開始執行時)*/
        opacity: 0;
    }
    .fade-enter-active {    /*5:過渡生效時(從無到有的過程中)*/
        transition: all 3s;
        color: red;
    }
    .fade-enter-to{    /*6:過渡結束時(從無到有執行完畢後)*/
        opacity: 1;
        color: yellow;
    }

    /*這裡是 opacity 從1到0 的過程(從有到無的過程,元素預設是無,所以從這裡是開始)*/
    .fade-leave {    /*1:過渡離開時(從有到無開始執行時)*/
    }
    .fade-leave-active {    /*2:過渡生效時(從有到無的過程中)*/
        transition: all 3s;
    }
    .fade-leave-to{    /*3:過渡離開結束時(從有到無執行完畢後)*/
        transition: all 3s;
        opacity: 0;
    }
</style>