zoukankan      html  css  js  c++  java
  • vue.js实现div展开收起动画

    const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'
    const Transition = {
      'before-enter' (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'
      },
    
      'after-enter' (el) {
        el.style.transition = ''
        el.style.height = ''
        el.style.overflow = el.dataset.oldOverflow
      },
    
      'before-leave' (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
        }
      },
    
      'after-leave' (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)
      }
    }

    1.建个JS文件随便取个名字,把上面的js复制进去,

    2.在你要用的页面 import 组件名字(随便取) from '你建的JS文件路径',

    3.export default{components:{组件名字}},

    4.data添加isActive=true;

    5.在需要使用的地方

    <组件名称>
     <div class="collapse-wrap"
       v-show="isActive">
      <!-- @slot default -->
      <slot></slot>
    </div> 
    </组件名称>
    
    <标签 @click="isActive=!isActive">打开或者收缩</标签>
    

    https://segmentfault.com/u/sinianjun斯年君

    https://segmentfault.com/q/1010000011359250 的回答

  • 相关阅读:
    IP地址查询接口
    Windows2008防火墙封ip
    UI设计原则
    iis7.5中使用fastcgi方式配置php5.6.5
    serv-u设置被动模式注意的问题
    mysql函数计算地表两点间距离
    vs2012出现无法启动iis express web 服务器的错误
    基于jquery的表单校验插件
    基于jquery的表单校验插件
    php redis 负载均衡[转]
  • 原文地址:https://www.cnblogs.com/aknife/p/12504243.html
Copyright © 2011-2022 走看看