<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>
0 个回复