卡片过度效果从无到有 卡片翻转抽奖效果

卡片过度效果从无到有 卡片翻转抽奖效果

<!--
 * @Author: zhouyx
 * @Date: 2022-06-02 17:13:12
 * @LastEditors: zhouyx
 * @LastEditTime: 2022-06-02 18:01:23
-->
<template>
  <div class="">
    <!-- <div id="view" class="start-scale"></div> -->
    <div :class="index == 0 ? '' : 'start-scale'" v-show="show">
      <img class="images" src="../../../assets/img/bagbg1.png" alt="" />
      <button class="btn" @click="getlists">确定</button>
    </div>
    <button @click="getlist" style="height:200px;width:200px;">提交</button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 0,
      show: false
    };
  },
  mounted() {},
  methods: {
    getlist() {
      this.show = true;
      this.index = 1;
    },
    getlists() {
      this.show = false;
      this.index = 0;
    }
  },
  components: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
.picbox {
  float: left;
  width: 200px;
  height: 200px;
  margin: auto;
  margin: 10px;
  position: relative;
  /*父元素里面包含需要变换的内容，所以设置为3D变换*/
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: 1.5s;
  /*设置在1.5s内完成变换*/
}

.start-scale {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 300px;
  height: 300px;
  background: #fff;
  animation: mymove 2s 1;
  -webkit-animation: mymove 2s 1;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;

  /* *父元素里面包含需要变换的内容，所以设置为3D变换*/
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: 2s;
}

@keyframes mymove {
  from {
    opacity: 0;
    transform: rotateY(180deg);
  }

  to {
    transform: scale(2, 2);
    background: #f60;
    opacity: 1;
    transform: rotateY(360deg);
  }
}
.images {
  width: 300px;
  height: 280px;
}
.btn {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 6;
  transform: rotateY(0deg);
  color: #fff;
  text-align: center;
}
</style>