离开有动画，但是入场没有动画，不知道咋回事

Search下的index

<template>
<transition name="search">
<div class="search1">
<header class="g-header-container">
<searchheader @query="getQuery"></searchheader>
</header>
<div class="g-content-container">
<scroll>
<searchhot v-show="!query"></searchhot>
<searchhistory @show-confirm="showConfirm" ref="history" v-show="!query" ></searchhistory>
<searchresult v-show="query" :query="query"></searchresult>
</scroll>
</div>
<confirm msg="确定要清空吗" ref="confirm" @confirm="clearAll"></confirm>
</div>
</transition>
</template>

<script>
import searchheader from './header';
import scroll from 'base/scroll';
import confirm from 'base/confirm';
import searchhot from './hot';
import searchhistory from './history';
import searchresult from './result';
export default {
data() {
return {
query: ''
};
},
components: {
searchheader,
scroll,
confirm,
searchhot,
searchhistory,
searchresult
},
methods: {
getQuery(query) {
this.query = query;
},
showConfirm() {
this.$refs.confirm.show();
},
clearAll() {
this.$refs.history.clear();
this.$refs.history.update();
}
}
};
</script>

<style lang="scss" scoped>
@import "~assets/scss/mixins";
.search1 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $search-z-index;
background-color: $bgc-theme;
}
.search-enter-active,
.search-leave-active {
transition: all 0.5s;
}

.search-enter,
.search-leave-to {
transform: translate3d(100%, 0, 0);
}

</style>

home的index
<template>
<div class="home">
<header class="g-header-container">
<homeheader :class="{'header-transition':isheadertransition}" ref="header"></homeheader>
</header>

<scroll
:new_recommends="recommends"
pullDown
pullUp
@pull-down="pullToRefresh"
@pull-up="pullToLoadMore"
@scroll-end="scrollEnd"
@scroll="scroll"
@pull-down-transition-end="pullDownTransitionEnd"
ref="scroll"
>
<homeslider ref="slider"></homeslider>
<homenav></homenav>
<homerecommend @loaded="getRecommends" ref="recommend"></homerecommend>
</scroll>

<div class="g-backtop-container">
<backtop :visible="isBackTopVisible" @backtop="backToTop"></backtop>
</div>
<router-view></router-view>
</div>
</template>

<script>
import homeheader from './header';
import homeslider from './slider';
import scroll from 'base/scroll';
import homenav from './nav';
import homerecommend from './recommend';
import backtop from 'base/backtop';
import { HEADER_TRANSITION_HEIGHT } from './config';

export default {
name: 'home',
components: {
scroll,
homeheader,
homeslider,
homenav,
homerecommend,
backtop
},
data() {
return {
recommends: [],
isBackTopVisible: false,
isheadertransition: false
};
},
methods: {
getRecommends(recommends) {
this.recommends = recommends;
},
pullToRefresh(end) {
this.$refs.slider.update().then(end);
},
pullToLoadMore(end) {
this.$refs.recommend
.update()
.then(end)
.catch(err => {
if (err) {
console.log(err);
}
end();
});
},
scrollEnd(translate, scroll, pulling) {
if (!pulling) {
this.changeHeaderStatus(translate);
}
this.isBackTopVisible = translate < 0 && -translate > scroll.height;
console.log(this.isBackTopVisible, scroll.height);
},
backToTop() {
this.$refs.scroll && this.$refs.scroll.scrollToTop();
},
changeHeaderStatus(translate) {
if (translate > 0) {
this.$refs.header.hide();
return;
}
this.$refs.header.show();
this.isheadertransition = -translate > HEADER_TRANSITION_HEIGHT;
},
scroll(translate) {
this.changeHeaderStatus(translate);
},
pullDownTransitionEnd() {
this.$refs.header.show();
}

}
};
</script>

<style lang="scss" scoped>
@import "~assets/scss/mixins"; //引入mixins文件

.home {
background-color: $bgc-theme;
overflow: hidden;
width: 100%;
height: 100%;
}
</style>

search的header
<template>
<navbar class="header">
<i class="iconfont icon-fanhui" slot="left" @click="goBack"></i>
<div slot="center" class="searchbox">
<searchbox :placeholder="searchBoxPlaceholder" @click.native="gotosearch" @query="Query"></searchbox>
</div>
</navbar>
</template>

<script>
import navbar from 'base/navbar';
import searchbox from 'base/searchBox';
export default {
data() {
return {
searchBoxPlaceholder: '开学季有礼，好货五折起'
};
},
components: {
navbar,
searchbox
},
methods: {
Query(query) {
console.log(query);
this.$emit('query', query);
},
gotosearch() {
this.$router.push('/search');
},
goBack() {
this.$router.back();
}
}
};
</script>

<style lang="scss" scoped>
@import "~assets/scss/mixins";
.header {
.iconfont {
color: $icon-color;
font-size: $icon-font-size;
}
.searchbox {
width: 100%;
}
.mine-search-box-wrapper{
background-color: $bgc-theme
}

}
</style>

home的header
<template>
<navbar class="header" v-show="visible">
<i class="iconfont icon-saoyisao" slot="left"></i>
<div slot="center" class="search">
<searchbox
:placeholder="searchBoxPlaceholder"
@click.native="gotosearch"
@query="getQuery"
fake
></searchbox>
</div>
<i class="iconfont icon-xiaoxi" slot="right"></i>
</navbar>
</template>

<script>
import navbar from 'base/navbar';
import searchbox from 'base/searchBox';

export default {
name: 'homeHeader',
components: {
navbar,
searchbox
},
data() {
return {
visible: true,
searchBoxPlaceholder: '开学季有礼，好货五折起'
};
},
methods: {
show() {
this.visible = true;
},
hide() {
this.visible = false;
},
getQuery(query) {
console.log(query);
},
gotosearch() {
this.$router.push('/search');
}
}
};
</script>

<style lang="scss" scoped>
@import "~assets/scss/mixins";
.header {
&.mine-navbar {
background-color: transparent;
transition: background-color 0.5s;
}

&.header-transition {
background-color: $header-bgc-translucent;
}

.iconfont {
color: $icon-color-default;
font-size: $icon-font-size;
}
.search{
width: 100%;
}
}
</style>

base下的searchBOX
<template>
<div class="mine-search-box-wrapper">
<i class="iconfont icon-sousuo"></i>
<div class="mine-search-box" v-if="fake">{{placeholder}}</div>
<input
class="mine-search-box"
type="text"
title="搜索框"
ref="input"
v-model="query"
:placeholder="placeholder"
v-if="!fake"
/>
<i class="iconfont icon-guanbi" v-show="query" @click="reset"></i>
</div>
</template>

<script>
import { debounce } from '../../assets/js/util';

export default {
name: 'MeSearchBox',
data() {
return {
query: ''
};
},

props: {
placeholder: {
type: String,
default: '点击输入搜索内容'
},
fake: {
type: Boolean,
default: false
}
},
methods: {
focus() {
this.$refs.input && this.$refs.input.focus();
},
clear() {
this.query = '';
},
reset() {
this.clear();
this.focus();
}
},
watch: {
query: debounce(function () {
this.$emit('query', this.query);
})
}
};
</script>

<style lang="scss" scoped>
@import "~assets/scss/mixins";

$search-box-height: 30px;

.mine-search-box-wrapper {
display: flex;
align-items: center;
width: 100%;
height: $search-box-height;
padding: 0 7px;
background-color: #fff;
border-radius: $search-box-height / 2;

}

.iconfont {
color: $icon-color;
font-size: $icon-font-size-sm;
font-weight: bold;
}

.mine-search-box {
flex: 1;
background: none;
border: none;
margin: 0 6px;
color: #666;
line-height: 1.5;
width: 100%;
}
</style>

老师帮我看看，我粘贴了几个可能跟这个问题有关系的代码