captain-ui/es/scroll/src/components/img.js

有赞vue wap业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import fullfillImage from '@youzan/utils/fullfillImage';
import animate from '../utils/animate';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('transition', {
      on: {
        "before-enter": _vm.beforeEnter,
        "enter": _vm.enter,
        "leave": _vm.leave
      }
    }, [_c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.active,
        expression: "active"
      }],
      staticClass: "cap-scroll-animate-img",
      style: _vm.imgStyle
    }, [_c('img', {
      attrs: {
        "src": _vm.imgUrl,
        "width": _vm.item.width * 2,
        "height": _vm.item.height * 2,
        "alt": "过场动画元素"
      }
    })])]);
  },
  name: 'cap-scroll-animate-img',
  props: {
    item: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  data: function data() {
    var animateMap = {
      fadein: [{}, {}],
      drop: [{
        y: -200
      }, {
        y: 0
      }],
      float: [{
        y: 200
      }, {
        y: 0
      }],
      leftin: [{
        x: -200
      }, {
        y: 0
      }],
      rightin: [{
        x: 200
      }, {
        y: 0
      }]
    };
    Object.keys(animateMap).forEach(function (k) {
      animateMap[k][0].opacity = 0;
      animateMap[k][1].opacity = 1;
    });
    var animateStyle = this.item.anmStyle.toLowerCase();
    return {
      animateMap: animateMap,
      animateStyle: animateStyle
    };
  },
  computed: {
    imgUrl: function imgUrl() {
      return fullfillImage(this.item.imageUrl, "!" + this.item.width * 2 + "x" + this.item.height * 2 + ".jpg");
    },
    imgStyle: function imgStyle() {
      return {
        position: 'absolute',
        top: this.item.y * 2 + "px",
        left: this.item.x * 2 + "px"
      };
    },
    fromFrame: function fromFrame() {
      return _extends({
        x: 0,
        y: 0,
        z: 0
      }, this.animateMap[this.animateStyle][0]);
    },
    toFrame: function toFrame() {
      return _extends({
        x: 0,
        y: 0,
        z: 0
      }, this.animateMap[this.animateStyle][1]);
    }
  },
  methods: {
    setStyle: function setStyle(el, properties) {
      for (var i in properties) {
        el.style[i] = properties[i];
      }
    },
    beforeEnter: function beforeEnter(el) {
      this.setStyle(el, this.fromFrame);
    },
    enter: function enter(el, done) {
      animate(el, {
        from: this.fromFrame,
        to: this.toFrame,
        callback: done,
        duration: this.item.duration
      });
    },
    leave: function leave(el, done) {
      animate(el, {
        from: this.toFrame,
        to: this.fromFrame,
        callback: done,
        duration: this.item.duration / 2
      });
    }
  }
};