transform案例以及深入了解transition

最新推荐文章于 2021-07-18 16:29:46 发布

爱吃一块五花肉

最新推荐文章于 2021-07-18 16:29:46 发布

阅读量249

点赞数 1

本文链接：https://blog.csdn.net/yyanglirong/article/details/105528265

版权

今天在工作中涉及到一个抽奖的小案例，话不多说，先把简单的效果给大家看一下~

这个动图不知道为啥传上来有点问题哈，效果就是一个很简单的随机抽奖
在这里插入图片描述

首先我把最基本的css样式写出来
这是Html

<div id="app">
    <img class="circle"
      :style="[{transform: `rotate(${runDeg}deg)`}]"
    src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2550179203,2040718997&fm=26&gp=0.jpg">
    <div @click="handle">
      <img class="pointer" src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3256986380,3523884835&fm=115&gp=0.jpg">
    </div>
  </div>

对应的css为

.circle{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  transition:  all 3s ease-in-out;
}
.pointer{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  left: 42%;
  top: 27%;
}

很清楚我们可以看出我给中间的抽奖指针的那张图添加一个点击事件，这个点击事件将会去触发抽奖图片的transfrom旋转属性
对应抽奖图片我给他绑定了一个动态的style:style="[{transform: rotate(${runDeg}deg)}]"
下面来看对应的点击事件如何写

handle(){
    let prizeNum = 6;
    let prizeIndex = Math.floor(Math.random() * prizeNum +1);
    let randCircle = 2; // 附加圈数
    let preDeg = this.runDeg;
    this.runDeg = 
        this.runDeg +
        (randCircle * 360 -(prizeIndex - 1) * (360 / prizeNum)) -
        (preDeg % 360);
  }

这样一个抽奖效果就出来了，这里就不得不提transform对应的css属性transition，上网查询之后发现这个东西用到的方面还挺多。

深入理解css过渡transition

通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性开始简单，但实际上它有很多需要注意的细节和容易混淆的地方。
定义：过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。