2***@qq.com
2***@qq.com
  • 发布:2022-09-26 17:58
  • 更新:2022-09-26 17:58
  • 阅读:160

nvue 实现图标360顺时针旋转,只能旋转一圈,不能无线转圈

分类:nvue
<template>  
<view class="wrapper" style="display: flex;justify-content: center;align-items: center;">  
    <!-- <view class="box" > -->  
        <!-- <image :class="{origin: !go, target: go}" class="img" src="../../rolate.jpg" mode=""></image>  

        <image style="margin-top: 150rpx;" :class="{origins: !go, targets: go}" class="img" src="../../rolate.jpg" mode=""></image>  

         -->  
        <image style="margin-top: 150rpx;" :class="{originR: !go, targetR: go}" class="img" src="../../rolate.jpg" mode=""></image>  
    <!-- </view> -->  
</view>  

</template>
<script>
export default {
data() {
return {
go: false
}
},
mounted() {
setInterval(() => {
this.go = !this.go
},5000)
// setInterval(() => {
// this.go = !this.go
// }, 1000)

    }  
}  

</script>
<style>
.box {
height: 200rpx;
width: 200rpx;
/ background-color: #4CD964; /
}
.img{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.target {
transform: scale(1.1);
transition:transform 1s ;
}
.origin { // 这里可以简写哈
transform: scale(1);
transition-property:transform;
transition-duration: 1s;
}
.targets {
transform: translateY(50rpx);
transition:transform 2s ;
}
.origins { // 这里可以简写哈
transform: translateY(0);
transition-property:transform;
transition-duration: 2s;
}
.targetR {
transform: rotate(360deg);
transition:transform 5s ;
}
.originR { // 这里可以简写哈
transform: rotate(0);
transition-property:transform;
transition-duration:5s ;
}
</style>

2022-09-26 17:58 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复