one_day_in_southern_Song_dynasty/src/components/SingleLongImageSerialFrames.vue

<template>
  <div
    class="single-long-image-serial-frames"
  >
    <img
      class="long-image"
      :style="{
        transitionDuration: transitionDuration + 'ms',
        transitionTimingFunction: `steps(${frameNumber - 1}, jump-end)`,
        left: status === 'initial' ? 0 : `calc(-100% * ${frameNumber - 1})`
      }"
      :src="imageSrc"
      alt=""
      @dragstart.prevent
    >
    <HotSpot
      class="hot-spot"
      :style="{
        left: hotSpotCenterPosLeft,
        top: hotSpotCenterPosTop,
      }"
      @click="onClickHotSpot"
    />
  </div>
</template>

<script>
export default {
  props: {
    imageSrc: {
      type: String,
      required: true,
    },
    frameNumber: {
      type: Number,
      required: true,
    },
    transitionDuration: {
      type: Number,
      default: 2500,
    },
    hotSpotCenterPosLeft: {
      type: String,
      default: '50%'
    },
    hotSpotCenterPosTop: {
      type: String,
      default: '50%',
    },
  },
  data() {
    return {
      status: 'initial', // 'initial', 'variant'
      isChanging: false,
    }
  },
  methods: {
    onClickHotSpot() {
      if (this.isChanging) {
        return
      } else {
        if (this.status === 'initial') {
          this.status = 'variant'
        } else {
          this.status = 'initial'
        }
        this.isChanging = true
        setTimeout(() => {
          this.isChanging = false
        }, 2500)
      }
    },
  }
}
</script>

<style lang="less" scoped>
.single-long-image-serial-frames {
  position: absolute;
  overflow: hidden;
  > .long-image {
    position: absolute;
    height: 100%;
    transition-property: left;
  }
  > .hot-spot {
    position: absolute;
    transform: translate(-50%, -50%);
  }
}
</style>