1. 实现原理
实际解决用户需求:当用户点击抽奖时,会请求接口获取中奖的奖品信息,前端根据中奖编号进行修改css样式,让转盘旋转,调整角度对应后端返回的奖品。如果抽奖有多次机会的话,每次需要抽奖结束后需要重置角度
2.html 代码
.wheel
img.turntable(
src='@/assets/img/second-anniversary/turntable.png'
:style="{transform:'rotate('+rotateAngle+'deg)',transition:rotateTransition == ''?'transform 4s ease-out':rotateTransition }"
)
img.pointer(
src='@/assets/img/second-anniversary/pointer.png'
@click='lottery'
)
transform:用来改变旋转的角度
transition: 旋转过渡效果
3. js逻辑代码
<script>
import {
draw, getDrawCount } from '@/service/draw.js'
export default {
data() {