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

vivo ui component lib for vue

import _Object$assign from 'babel-runtime/core-js/object/assign';

(function () {
  if (typeof document !== 'undefined') {
    var head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style'),
        css = " .vui-cutover { overflow: hidden; } .vui-cutover > :nth-child(1), .vui-cutover > :nth-child(2) { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; } .vui-cutover > :nth-child(2) { margin-left: -100%; } /*fade效果*/ .vui-cutover-fade-enter-active, .vui-cutover-fade-leave-active { -webkit-transition-property: opacity; -o-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; } .vui-cutover-fade-enter, .vui-cutover-fade-leave-active { opacity: 0; } /*cover效果*/ .vui-cutover-cover-enter-active, .vui-cutover-cover-leave-active { -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; -o-transition-property: opacity, -o-transform; -moz-transition-property: opacity, transform, -moz-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform, -moz-transform, -o-transform; } .vui-cutover:not(.vui-cutover-back) .vui-cutover-cover-enter { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .vui-cutover:not(.vui-cutover-back) .vui-cutover-cover-leave-active { opacity: .5; } .vui-cutover-back .vui-cutover-cover-enter { opacity: .5; } .vui-cutover-back .vui-cutover-cover-leave-active { position: relative; z-index: 1; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } ";style.type = 'text/css';if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }head.appendChild(style);
  }
})();

var index = { render: function render() {
    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { class: ['vui-cutover', { 'vui-cutover-back': _vm.back }] }, [_c('transition', _vm._b({ attrs: { "name": 'vui-cutover-' + _vm.type } }, 'transition', _vm.$attrs, false), [_vm._t("default", null, { styleObj: _vm.styleObj })], 2)], 1);
  }, staticRenderFns: [],
  name: 'cutover',
  props: {
    type: { // 切换类型
      type: String,
      default: 'fade'
    },
    duration: {
      type: Number,
      default: 400
    },
    checkBack: { // 当作页面转场动画时，返回时动效是否相反，且此时要配合vue-router使用，其它场景使用时不要设置该属性
      type: Boolean,
      default: false
    }
  },
  data: function data() {
    return {
      back: false // 是不是返回
    };
  },

  computed: {
    styleObj: function styleObj() {
      return {
        transitionDuration: this.duration + 'ms'
      };
    }
  },
  watch: {
    $route: function $route() {
      if (!window.history.state || !window.history.state.vuiCutoverTime) {
        // 新建历史记录，前进
        window.history.replaceState(_Object$assign({}, window.history.state || {}, {
          vuiCutoverTime: Date.now()
        }), '');
        this.back = false;
      } else if (!this.time || window.history.state.vuiCutoverTime === this.time) {
        // 刷新或者replace
        this.back = false;
      } else if (window.history.state.vuiCutoverTime < this.time) {
        // 后退
        this.back = this.checkBack;
      } else {
        // 前进
        this.back = false;
      }

      this.time = window.history.state.vuiCutoverTime;
    }
  }
};

export default index;