go-view/src/components/Flipper/index.vue

<template>
  <div class="M-Flipper" :class="[flipType, { go: isFlipping }]">
    <div class="digital front" :data-front="frontTextFromData || 0"></div>
    <div class="digital back" :data-back="backTextFromData || 0"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, PropType, watch } from 'vue'
type FlipType = 'up' | 'down'

const props = defineProps({
  flipType: {
    type: Object as PropType<FlipType>,
    default: () => {
      return 'down'
    }
  },
  frontText: {
    type: [Number, String],
    default: 0
  },
  backText: {
    type: [Number, String],
    default: 0
  },
  duration: {
    type: Number,
    default: 600
  },
  width: {
    type: Number,
    default: 60
  },
  height: {
    type: Number,
    default: 100
  },
  radius: {
    type: Number,
    default: 10
  },
  frontColor: {
    type: String,
    default: '#ffffff'
  },
  backColor: {
    type: String,
    default: '#000000'
  }
})

const isFlipping = ref(false)
const frontTextFromData = ref(props.frontText)
const backTextFromData = ref(props.backText)

// 翻牌
const flip = (front: string | number, back: string | number) => {
  if (!back) back = +front - 1
  console.log('flip:', { front, back })
  // 如果处于翻转中，则不执行
  if (isFlipping.value) return
  // 设置翻盘前后数据
  backTextFromData.value = back
  frontTextFromData.value = front

  // 设置翻转状态为true
  isFlipping.value = true

  // 翻牌结束的行为
  setTimeout(() => {
    isFlipping.value = false // 设置翻转状态为false
    frontTextFromData.value = back
  }, props.duration)
}

watch(
  () => props.backText,
  (newVal, oldVal) => {
    console.log('watch:props.backText', newVal)
    flip(newVal, oldVal as string | number)
  },
  {
    immediate: true
  }
)

defineExpose({
  flip
})
</script>

<style lang="scss" scoped>
// #region 动画效果
@keyframes frontFlipDown {
  0% {
    transform: perspective(v-bind('`${props.height * 1.6}px`')) rotateX(0deg);
  }
  100% {
    transform: perspective(v-bind('`${props.height * 1.6}px`')) rotateX(-180deg);
  }
}
@keyframes backFlipDown {
  0% {
    transform: perspective(v-bind('`${props.height * 1.6}px`')) rotateX(180deg);
  }
  100% {
    transform: perspective(v-bind('`${props.height * 1.6}px`')) rotateX(0deg);
  }
}
@keyframes frontFlipUp {
  0% {
    transform: perspective(v-bind('`${props.height * 1.6}px`')) rotateX(0deg);
  }
  100% {
    transform: perspective(v-bind('`${props.height * 1.6}px`')) rotateX(180deg);
  }
}
@keyframes backFlipUp {
  0% {
    transform: perspective(v-bind('`${props.height * 1.6}px`')) rotateX(-180deg);
  }
  100% {
    transform: perspective(v-bind('`${props.height * 1.6}px`')) rotateX(0deg);
  }
}
// #endregion

$frontColor: v-bind('props.frontColor');
$backColor: v-bind('props.backColor');
$radius: v-bind('`${props.radius}px`');
$width: v-bind('`${props.width}px`');
$height: v-bind('`${props.height}px`');
$shadowColor: #000000;
$lineColor: #ffffff;

.M-Flipper {
  display: inline-block;
  position: relative;
  width: $width;
  height: $height;
  line-height: $height;
  border: solid 1px $backColor;
  border-radius: $radius;
  background: $frontColor;
  font-size: v-bind('`${props.width * 1.1}px`');
  color: $frontColor;
  box-shadow: 0 0 6px rgba($color: $shadowColor, $alpha: 0.5); // 阴影部分
  text-align: center;
  // font-family: 'Helvetica Neue';

  .digital:before,
  .digital:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    background: $backColor;
    overflow: hidden;
    box-sizing: border-box;
  }
  .digital.front:before,
  .digital.front:after {
    content: attr(data-front) !important;
  }
  .digital.back:before,
  .digital.back:after {
    content: attr(data-back) !important;
  }
  .digital:before {
    top: 0;
    bottom: 50%;
    border-radius: $radius $radius 0 0;
    border-bottom: solid 1px rgba($color: $lineColor, $alpha: 0.5); // 中间线颜色
  }
  .digital:after {
    top: 50%;
    bottom: 0;
    border-radius: 0 0 $radius $radius;
    line-height: 0;
  }
  /*向下翻*/
  &.down .front:before {
    z-index: 3;
  }
  &.down .back:after {
    z-index: 2;
    transform-origin: 50% 0%;
    transform: perspective(v-bind('`${props.height * 1.6}px`')) rotateX(180deg);
  }
  &.down .front:after,
  &.down .back:before {
    z-index: 1;
  }
  &.down.go .front:before {
    transform-origin: 50% 100%;
    animation: frontFlipDown v-bind('`${props.duration / 1000}s`') ease-in-out both;
    box-shadow: 0 -2px 6px rgba($color: $lineColor, $alpha: 0.3);
    backface-visibility: hidden;
  }
  &.down.go .back:after {
    animation: backFlipDown v-bind('`${props.duration / 1000}s`') ease-in-out both;
  }
  /*向上翻*/
  &.up .front:after {
    z-index: 3;
  }
  &.up .back:before {
    z-index: 2;
    transform-origin: 50% 100%;
    transform: perspective(v-bind('`${props.height * 1.6}px`')) rotateX(-180deg);
  }
  &.up .front:before,
  &.up .back:after {
    z-index: 1;
  }
  &.up.go .front:after {
    transform-origin: 50% 0;
    animation: frontFlipUp v-bind('`${props.duration / 1000}s`') ease-in-out both;
    box-shadow: 0 2px 6px rgba($color: $lineColor, $alpha: 0.3);
    backface-visibility: hidden;
  }
  &.up.go .back:before {
    animation: backFlipUp v-bind('`${props.duration / 1000}s`') ease-in-out both;
  }
}
</style>