vue 手风琴效果(高度不确定and高度确定)

高度不确定

 第一步：

// // collapse-transition.js
const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'
const Transition = {
  beforeEnter(el) {
    el.style.transition = elTransition
    if (!el.dataset) el.dataset = {}

    el.dataset.oldPaddingTop = el.style.paddingTop
    el.dataset.oldPaddingBottom = el.style.paddingBottom

    el.style.height = 0
    el.style.paddingTop = 0
    el.style.paddingBottom = 0
  },

  enter(el) {
    el.dataset.oldOverflow = el.style.overflow
    if (el.scrollHeight !== 0) {
      el.style.height = el.scrollHeight + 'px'
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    } else {
      el.style.height = ''
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    }

    el.style.overflow = 'hidden'
  },

  afterEnter(el) {
    el.style.transition = ''
    el.style.height = ''
    el.style.overflow = el.dataset.oldOverflow
  },

  beforeLeave(el) {
    if (!el.dataset) el.dataset = {}
    el.dataset.oldPaddingTop = el.style.paddingTop
    el.dataset.oldPaddingBottom = el.style.paddingBottom
    el.dataset.oldOverflow = el.style.overflow

    el.style.height = el.scrollHeight + 'px'
    el.style.overflow = 'hidden'
  },

  leave(el) {
    if (el.scrollHeight !== 0) {
      el.style.transition = elTransition
      el.style.height = 0
      el.style.paddingTop = 0
      el.style.paddingBottom = 0
    }
  },

  afterLeave(el) {
    el.style.transition = ''
    el.style.height = ''
    el.style.overflow = el.dataset.oldOverflow
    el.style.paddingTop = el.dataset.oldPaddingTop
    el.style.paddingBottom = el.dataset.oldPaddingBottom
  }
}

export default {
  name: 'collapseTransition',
  functional: true,
  render(h, { children }) {
    const data = {
      on: Transition
    }
    return h('transition', data, children)
  }
}

第二步：

<script>
  import CollapseTransition from './collapse-transition'; 
 
  export default {
    components: {
      'collapse-transition': CollapseTransition,
    },
  };
</script>

第三步：

<collapse-transition>
   <section v-show="fold">
       <div class="line"  v-for="item in 10">
           <div class="key">
              <span>{{ key }}</span>
           </div>
           <div class="value">
               <span>{{ value }}</span>    
         </div>
      </div>         
   </section>
</collapse-transition>

高度确定

第一步：

<transition name="collapse">
   <section v-show="fold">
       <div class="line" v-for"item in 10">
           <div class="key">
               <span>{{ key }}</span>
           </div>
            <div class="value">
               <span>{{ value }}</span>
           </div>
       </div>
    </section>
</transition>

第二步：

折叠盒子的总高度
.collapse-leave-active,
.collapse-enter-active {
  transition: max-height 0.3s;
}
.collapse-enter,
.collapse-leave-to {
  // opacity: 0;
  max-height: 0;
  overflow: hidden;
}
.collapse-enter-to,
.collapse-leave {
  max-height: 3rem;
}

侵权必删