javascript - vue 如何实现组件与组件之间的transition过渡?

问题描述

问 题

两个组件：nav导航栏组件，panel内容组件

需求：

• nav组件第二层导航的显示/隐藏(过渡效果)，已实现。

• nav与panel组件的过渡效果, 未实现。

说明：

• nav组件内部的DOM变化使得整个页面高度发生了变化，从而使nav下面的组件的offsetTop的变化都在瞬间，显得很突兀

• Vue文档中说明了触发transition需要v-if,v-for,或者DOM跟新。在这里是通过组件内部DOM的变化来触发组件与组件之间的过渡，感觉也应该是可以的啊，但是我没实现成功，是我理解的有问题吗？

<div id="app">
  <transition-group name="slide">
    <navigation key="nav" class="nav"></navigation>
    <panel key="panel" class="panel"></panel> 
  </transition-group>
</div>

Vue.component('navigation', {
    template: '\
      <section>\
      <div class="floor">\
          导航第一行\
        <button @click="second = !second">show</button>\
      </div>\
      <transition name="nav-slide">\
          <div v-if="second" class="floor floor-2">\
        导航第二行\
        </div>\
      </transition>\
    </section>\
  ',
  data() {
      return {
      second: false,
    };
  },
})

Vue.component('panel', {
    template: '<section>内容</section>',
})

new Vue ({
    el: '#app',
})

div {
  text-align: center;
  color: #fff;
}

.nav .floor {
  background: #ec8442;
  height: 30px;
}

.nav .floor button {
  right:10px;
  position: absolute;
}

.panel {
  height: 100px;
  background: #42c1ec;
  padding-top: 20px;
}

.floor-2 {
  transition: all 0.8s
}

.nav-slide-enter, .nav-slide-leave-active {
  opacity: 0;
  transform: translateY(-30px);
}

demo

解决方案

解决方案：

.nav-slide-enter, .nav-slide-leave-active
{
  transform: translateY(-30px);
  opacity: 0;
  margin-bottom: -30px;
}

https://jsfiddle.net/1862k2gm/

这篇关于javascript - vue 如何实现组件与组件之间的transition过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！