vue 使用 transition 做页面过渡切换时引起的 position 定位问题

vue 使用 transition 做页面过渡切换时引起的 position 定位问题

vue项目 home 页面的 <router-view /> 使用了 transition 包裹起来做过渡效果的页面切换，当切换到 info 页面，如图：

home页面

<template>
  <div id="app">
    <div class="main">
      <transition :enter-active-class="currentClass">
        <router-view/>
      </transition>
    </div>
   </div>
</template>

info 页面

<template>
  <div class="info_box">
    <div class="top">
      <span @click="back">&lt;</span>
      <p>{{infos.title}}</p>
    </div>
    <div class="info">
      <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide v-for="item in 5" :key="item">
            <img class="imgs" :src="infos.img" alt="">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <p>{{infos.info}}</p>
    <p>{{infos.num}}</p>

	//重点是这个盒子，样式在下面
    <div class="btn_box">
     <input @click="addCars(infos.id)" class="btn" type="button" value="添加到购物车"> 
    </div> 
  </div>
</template>

btn_box 的 样式

.btn_box {
  position: fixed;
  width: 100%;
  height: 50px;
  left: 0; 
  bottom: 0;
}

然后切换到 info 页面， 如图

通过css样式可以看到，设置的定位应该是国定在底部，当时刚进入的时候就停留字在中间等过渡效果完成才会固定到底部， 不管是什么定位都是这种情况

.btn_box {
  position: fixed;
  width: 100%;
  height: 50px;
  left: 0; 
  bottom: 0;
}

然后通过查找资料和多次测试，发现是高度问题引起的，于是给 info_box 这个类添加高度

.info_box{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
}

问题解决，一进入按钮就固定在底部