<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script src="vue.js"></script>
    </head>
    <body>
        <div>
        <h1>--过渡模式(进入和离开同时发生)--</h1>
        <div id="example1">
            <transition name="no-mode-fade">
                <!--当有相同标签名的元素切换时,需要通过 key 特性
                设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了
                效率只会替换相同标签内部的内容-->
                <button v-if="on" key="on" @click="on = false">
                    on
                </button>
                <button v-else="" key="off" @click="on = true">
                    off
                </button>
            </transition>
        </div>
        <script>
        var example1 = new Vue({
            el: '#example1',
            data: {
                on: false
            },
        })
        </script>
        <style>
            .no-mode-fade-enter-active, .no-mode-fade-leave-active {
                transition: opacity .5s
            }
            .no-mode-fade-enter, .no-mode-fade-leave-active {
                opacity: 0
            }
        </style>
        </div>
        <div>
        <h1>--过渡模式(元素绝对定位在彼此之上)--</h1>
        <div id="example2">
            <div class="no-mode-absolute-demo-wrapper">
                <transition name="no-mode-absolute-fade">                
                    <button v-if="on" key="on" @click="on = false">
                        on
                    </button>
                    <button v-else="" key="off" @click="on = true">
                        off
                    </button>                
                </transition>
            </div>
        </div>
        <script>
        var example2 = new Vue({
            el: '#example2',
            data: {
                on: false
            },
        })
        </script>
        <style>
            .no-mode-absolute-demo-wrapper {
                position: relative;
                height: 18px;
            }
            .no-mode-absolute-demo-wrapper button {
                position: absolute;
            }
            .no-mode-absolute-fade-enter-active, .no-mode-absolute-fade-leave-active {
                transition: opacity .5s
            }
            .no-mode-absolute-fade-enter, .no-mode-absolute-fade-leave-active {
                opacity: 0
            }
        </style>
        </div>
        <div>
        <h1>--过渡模式(加上translate滑动)--</h1>
        <div id="example3">
            <div class="no-mode-translate-demo-wrapper">
                <transition name="no-mode-translate-fade">                
                    <button v-if="on" key="on" @click="on = false">
                        on
                    </button>
                    <button v-else="" key="off" @click="on = true">
                        off
                    </button>                
                </transition>
            </div>
        </div>
        <script>
        var example3 = new Vue({
            el: '#example3',
            data: {
                on: false
            },
        })
        </script>
        <style>
            .no-mode-translate-demo-wrapper {
                position: relative;
                height: 18px;
            }
            .no-mode-translate-demo-wrapper button {
                position: absolute;
            }
            .no-mode-translate-fade-enter-active, .no-mode-translate-fade-leave-active {
                transition: all 1s;
            }
            .no-mode-translate-fade-enter, .no-mode-translate-fade-leave-active {
                opacity: 0;
            }
            .no-mode-translate-fade-enter {
                transform: translateX(31px);
            }
            .no-mode-translate-fade-leave-active {
                transform: translateX(-31px);
            }
        </style>
        </div>    
        <div>
        <h1>--过渡模式(out-in模式)--</h1>
        <div id="example4">
            <transition name="with-mode-fade" mode="out-in">                
                <button v-if="on" key="on" @click="on = false">
                    on
                </button>
                <button v-else="" key="off" @click="on = true">
                    off
                </button>                
            </transition>
        </div>
        <script>
        var example4 = new Vue({
            el: '#example4',
            data: {
                on: false
            },
        })
        </script>
        <style>
            .with-mode-fade-enter-active, .with-mode-fade-leave-active {
                transition: opacity .5s;
            }
            .with-mode-fade-enter, .with-mode-fade-leave-active {
                opacity: 0;
            }
        </style>
        </div>
        <div>
        <h1>--过渡模式(in-out模式)--</h1>
        <div id="example5">
            <div class="in-out-translate-demo-wrapper">
                <transition name="with-mode-fade" mode="in-out">                
                    <button v-if="on" key="on" @click="on = false">
                        on
                    </button>
                    <button v-else="" key="off" @click="on = true">
                        off
                    </button>                
                </transition>
            <div>
        </div>
        <script>
        var example5 = new Vue({
            el: '#example5',
            data: {
                on: false
            },
        })
        </script>
        <style>
            .in-out-translate-demo-wrapper {
                position: relative;
                height: 18px;
            }
            .in-out-translate-demo-wrapper button {
                position: absolute;
            }
            .in-out-translate-fade-enter-active, .in-out-translate-fade-leave-active {
                transition: all 5s;
            }
            .in-out-translate-fade-enter, .in-out-translate-fade-leave-active {
                opacity: 0;
            }
            .in-out-translate-fade-enter {
                transform: translateX(31px);
            }
            .in-out-translate-fade-leave-active {
                transform: translateX(-31px);
            }
        </style>
        </div>        
    </body>
</html>

运行效果图: