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

vivo ui component lib for vue

import _Object$keys from 'babel-runtime/core-js/object/keys';
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-turnover-index--turnover--IG24A-move { -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } ";style.type = 'text/css';if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }head.appendChild(style);
  }
})();

var delayName = prefixed('transitionDelay');
var durationName = prefixed('transitionDuration');

var index = { render: function render() {
    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('transition-group', { attrs: { "name": _vm.$style.turnover, "css": false, "tag": _vm.tag, "appear": _vm.appear }, on: { "appear": _vm.enter, "enter": _vm.enter, "leave": _vm.leave } }, [_vm._t("default")], 2);
  }, staticRenderFns: [], cssModules: { "turnover": "src-components-turnover-index--turnover--IG24A" },
  props: {
    tag: {
      type: String,
      default: 'div'
    },
    appear: {
      type: Boolean,
      default: true
    },
    duration: { // 过渡时间，单位ms
      type: Number,
      default: 200
    },
    timingFunction: { // 过渡缓动函数
      type: String,
      default: 'ease'
    },
    from: { // 初始状态的样式
      type: Object,
      default: function _default() {
        return {
          opacity: 0,
          transform: 'translate3d(50%, -50%, 0)'
        };
      }
    },
    to: {
      // leave时的最终样式，未设置默认跟from一致
      validator: function validator(value) {
        return value === undefined || value instanceof Object;
      }
    }
  },
  computed: {
    $style: function $style() {
      return this.$options.cssModules;
    },
    toStyle: function toStyle() {
      return this.to || this.from;
    }
  },
  methods: {
    enter: function enter(el, done) {
      var _Object$assign2,
          _this = this;

      var siblings = [].slice.call(this.$el.children);
      var interval = this.duration / siblings.length;
      var delay = siblings.indexOf(el) * interval;

      _Object$assign(el.style, (_Object$assign2 = {}, _defineProperty(_Object$assign2, delayName, delay + 'ms'), _defineProperty(_Object$assign2, durationName, this.duration + 'ms'), _Object$assign2));
      _Object$keys(this.from).forEach(function (prop) {
        el.style[prefixed(prop)] = _this.from[prop];
      });
      setTimeout(function () {
        _Object$keys(_this.from).forEach(function (prop) {
          el.style[prefixed(prop)] = '';
        });
        setTimeout(done, delay + _this.duration);
      });
    },
    leave: function leave(el, done) {
      var _Object$assign3,
          _this2 = this;

      var siblings = [].slice.call(this.$el.children);
      var interval = this.duration / siblings.length;
      var delay = (siblings.length - 1 - siblings.indexOf(el)) * interval;

      _Object$assign(el.style, (_Object$assign3 = {}, _defineProperty(_Object$assign3, delayName, delay + 'ms'), _defineProperty(_Object$assign3, durationName, this.duration + 'ms'), _Object$assign3));
      setTimeout(function () {
        _Object$keys(_this2.toStyle).forEach(function (prop) {
          el.style[prefixed(prop)] = _this2.toStyle[prop];
        });
        setTimeout(done, delay + _this2.duration);
      });
    }
  }
};

export default index;