<template>
    <transition name="city">
        <div v-show="isShow">
            <city-header></city-header>
            <city-search></city-search>
            <city-list></city-list>
            <city-alphabet></city-alphabet>
        </div>
    </transition>
</template>

<script>
import CityHeader from './components/header';
import CitySearch from './components/search';
import CityList from './components/list';
import CityAlphabet from './components/alphabet';
export default {
    name:'City',
    components: {
        CityHeader,
        CitySearch,
        CityList,
        CityAlphabet
    },
    data(){
        return{
            isShow:false
        };
    },
    mounted () {
        this.isShow=true;
    }
}
</script>

<style scoped>
    .city-enter-active,
    .city-leave-active {    
        transition: all 0.3s;
    }

    .city-enter,
    .city-leave-to {
    transform: translate3d(100%, 0, 0);
    }
    .city-enter-to,
    .city-leave{
    transform: translate3d(0, 0, 0);
    }
</style>

按理说移出动画的时候，transition是组件根节点，符合条件，为什么会没有效果