微信小程序点击添加 动画animation

点击(此处)折叠或打开

1. <view class="box">
   
2.   <view class='{{rotate}}' data-sd="{{an}}" bindtap="clickMe" id='we'>
   
3.   
   
4.  <text>你</text> </view>
   
5. 
   
6. 
   
7. </view>

点击(此处)折叠或打开

1. .box{
   
2.   width: 100%;
   
3.   height: 500rpx;
   
4.   background: pink;
   
5.   box-sizing: border-box;
   
6.   padding: 50rpx;
   
7. }
   
8. #we{
   
9.   width: 100rpx;
   
10.   height: 100rpx;
    
11.   background: red;
    
12.   border-radius: 100%;
    
13.   text-align: center;
    
14.  
    
15. 
    
16. }
    
17. #we text{
    
18.   padding: 23rpx;
    
19.   display: block;
    
20. }
    
21. .rotate{animation: zhuan 3s linear infinite;}
    
22. @keyframes zhuan{
    
23.   0%{
    
24.     transform: rotate(0deg)
    
25.   }
    
26.   20%{
    
27.     transform: rotate(60deg)
    
28.   }
    
29.    40%{
    
30.     transform: rotate(120deg)
    
31.   }
    
32.     60%{
    
33.     transform: rotate(180deg)
    
34.   }
    
35.      80%{
    
36.     transform: rotate(260deg)
    
37.   }
    
38.   90%{
    
39.     transform: rotate(300deg)
    
40.   }
    
41.     100%{
    
42.     transform: rotate(360deg)
    
43.   }
    
44. }

点击(此处)折叠或打开

1. data: {
   
2.     rotate:"rotate",
   
3.     an:1,
   
4.   },
   
5.  clickMe:function(){
   
6.   console.log(123456789);
   
7.   if(this.data.an == 1){
   
8.       this.setData({
   
9.         rotate:"",
   
10.         an: 2
    
11.       })
    
12.   }else if(this.data.an==2){
    
13.     this.setData({
    
14.       rotate: "rotate",
    
15.       an: 1
    
16.     })
    
17.         
    
18.   }
    
19. 
    
20.   
    
21.   }