<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script src="vue.js"></script>
    </head>
    <body>
        <div>
        <h1>--多個(gè)組件的過渡--</h1>
        <div id="example1">
            <input id="a" type="radio" value="v-a" name="view" @click="view = 'v-a'"></input>
            <label for="a">A</label>
            <input id="b" type="radio" value="v-b" name="view" @click="view = 'v-b'"></input>
            <label for="b">B</label>
            <transition name="component-fade" mode="out-in">
                <component v-bind:is="view"></component>
            </transition>
        </div>
        <script>        
        var example1 = new Vue({
            el: '#example1',
            data: {
                view: 'v-a'
            },
            components: {
                'v-a': {
                    template:'<div>Component A</div>'
                },
                'v-b': {
                    template:'<div>Component B</div>'
                }
            }
        })
        </script>
        <style>
            .component-fade-enter-active, .component-fade-leave-active {
                transition: opacity .3s ease;
            }
            .component-fade-enter, .component-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
                opacity: 0;
            }
        </style>
        </div>        
    </body>
</html>

運(yùn)行效果圖：