VUE环境下 CSS3+JS 实现发牌翻牌-Toy模板网

这篇具有很好参考价值的文章主要介绍了VUE环境下 CSS3+JS 实现发牌翻牌。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

创建牌容器（关键点：overflow：hidden）：

<div class="popup-box"></div>

.popup-box {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0;
    overflow: hidden;
}

创建每一张牌《固定十张牌》：

1.父级（卡牌未放开显示背景）卡牌子级（显示卡牌内容）

<div class="popup-box-card" :class="['popup-box-card-cws' + index, item.show && 'popup-box-card' + index]" v-for="(item, index) in cardList">

    <div class="popup-top-box-card-son"
            :class="[item.show && 'popup-box-card-son-rotate']">
            <div class="popup-box-card-son-box">
              <img :src="item.Url">
              <div>Name</div>
              <div>Describe</div>
            </div>
          </div>
</div>

.popup-top-box-card {
    position: absolute;
    background: url('https://oss-test.newplay7.com/20221213/16709168590023654.png') no-repeat;
    background-size: 100% 100%;
    transform: scale(0.51) rotateY(0deg);
    margin-top: 0;
    left: 210px;
    top: calc(100vh - 400px);
    transition: all 0.2s;
  }
  .popup-top-box-card-son {
    width: 100%;
    height: 100%;
    background: url('https://gd-hbimg.huaban.com/7057f0b053d03b1e3034f902ad252edd6c930fbef8d15-GA6eJ7_fw658') no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    transform: rotateY(180deg);
}

初始化牌位置：

  .popup-top-box-card-cws1,
  .popup-top-box-card-cws4,
  .popup-top-box-card-cws7 {
    left: 230px;
  }

  .popup-top-box-card-cws2,
  .popup-top-box-card-cws5,
  .popup-top-box-card-cws8 {
    left: 220px;
  }

VUE环境下 CSS3+JS 实现发牌翻牌,css3,前端,css

开始发牌：

1.通过变量show来控制添加 'popup-top-box-card' + index 给牌Class 改变position top left 实现发牌动作 rotateY(180deg) 实现翻牌动作

2.通过变量show来控制卡牌子级添加 ‘popup-box-card-son-rotate’ opacity 延迟0.05s显示0.2s卡牌内容

JS 发牌方法

const addCardAnimation = (inx: number, arr: CardItemType[]) => {
  return new Promise(revele => {
    arr[inx] = { ...arr[inx], show: true}
    cardList.value = arr
      setTimeout(() => {
        revele(true)
      }, 400)
  })
}

for (let i = 0; i < cardList.value.length; i++) {
  await addCardAnimation(i, cardList.value)
}

2023-08-29 14-48-44文章来源地址https://www.toymoban.com/news/detail-690419.html

到了这里，关于VUE环境下 CSS3+JS 实现发牌翻牌的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！