vivo-ui/lib/components/slide/index.js

vivo ui component lib for vue

import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _Object$assign from 'babel-runtime/core-js/object/assign';
import { prefixed } from '../../tools/prefix/index';

(function () {
  if (typeof document !== 'undefined') {
    var head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style'),
        css = " .src-components-slide-index--slide--1oadm-enter-active, .src-components-slide-index--slide--1oadm-leave-active { overflow: hidden; } .src-components-slide-index--slide--1oadm-enter, .src-components-slide-index--slide--1oadm-leave-to { height: 0 !important; } ";style.type = 'text/css';if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }head.appendChild(style);
  }
})();

var durationName = prefixed('transitionDuration');
var timingFunctionName = prefixed('transitionTimingFunction');

var index = { render: function render() {
    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('transition', { attrs: { "name": _vm.$style.slide }, on: { "before-enter": _vm.beforeEnter, "after-enter": _vm.afterEnter, "before-leave": _vm.beforeLeave, "after-leave": _vm.afterLeave } }, [_vm._t("default")], 2);
  }, staticRenderFns: [], cssModules: { "slide": "src-components-slide-index--slide--1oadm" },
  props: {
    duration: {
      type: Number,
      default: 300
    },
    timingFunction: {
      type: String,
      default: 'ease'
    }
  },
  computed: {
    $style: function $style() {
      return this.$options.cssModules;
    }
  },
  methods: {
    /**
         * vue过渡enter顺序
         * 执行beforeEnter钩子->添加enter,enter-active类并显示元素->执行enter钩子->下一动画帧去掉enter类并添加enter-to类
         * 执行beforeEnter钩子->添加enter,enter-active类并显示元素->执行enter钩子  是在同一个事件循环中同步执行的
         *
         * vue过渡leave顺序
         * 执行beforeLeave钩子->添加leave,leave-active类->执行leave钩子->下一动画帧去掉leave类并添加leave-to类
         */
    beforeEnter: function beforeEnter(el) {
      if (!this.transitioning) {
        var _Object$assign2;

        // 从头开始，而不是leave取消了
        this.transitioning = true;
        this.styleHeight = el.style.height;
        this.styleDuration = el.style[durationName];
        this.styleTimingFunction = el.style[timingFunctionName];
        el.style.display = '';
        _Object$assign(el.style, (_Object$assign2 = {
          height: window.getComputedStyle(el).height
        }, _defineProperty(_Object$assign2, durationName, this.duration + 'ms'), _defineProperty(_Object$assign2, timingFunctionName, this.timingFunction), _Object$assign2));
      }
    },
    afterEnter: function afterEnter(el) {
      var _Object$assign3;

      this.transitioning = false;
      _Object$assign(el.style, (_Object$assign3 = {
        height: this.styleHeight
      }, _defineProperty(_Object$assign3, durationName, this.styleDuration), _defineProperty(_Object$assign3, timingFunctionName, this.styleTimingFunction), _Object$assign3));
    },
    beforeLeave: function beforeLeave(el) {
      if (!this.transitioning) {
        var _Object$assign4;

        // 从头开始，而不是enter取消了
        this.transitioning = true;
        this.styleHeight = el.style.height;
        this.styleDuration = el.style[durationName];
        this.styleTimingFunction = el.style[timingFunctionName];
        _Object$assign(el.style, (_Object$assign4 = {
          height: window.getComputedStyle(el).height
        }, _defineProperty(_Object$assign4, durationName, this.duration + 'ms'), _defineProperty(_Object$assign4, timingFunctionName, this.timingFunction), _Object$assign4));
      }
    },
    afterLeave: function afterLeave(el) {
      var _Object$assign5;

      this.transitioning = false;
      _Object$assign(el.style, (_Object$assign5 = {
        height: this.styleHeight
      }, _defineProperty(_Object$assign5, durationName, this.styleDuration), _defineProperty(_Object$assign5, timingFunctionName, this.styleTimingFunction), _Object$assign5));
    }
  }
};

export default index;