Chinaunix首页 | 论坛 | 博客
  • 博客访问: 569543
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: JavaScript

2018-01-22 11:50:45


点击(此处)折叠或打开

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


  5. </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. #we text{
  17.   padding: 23rpx;
  18.   display: block;
  19. }
  20. .rotate{animation: zhuan 3s linear infinite;}
  21. @keyframes zhuan{
  22.   0%{
  23.     transform: rotate(0deg)
  24.   }
  25.   20%{
  26.     transform: rotate(60deg)
  27.   }
  28.    40%{
  29.     transform: rotate(120deg)
  30.   }
  31.     60%{
  32.     transform: rotate(180deg)
  33.   }
  34.      80%{
  35.     transform: rotate(260deg)
  36.   }
  37.   90%{
  38.     transform: rotate(300deg)
  39.   }
  40.     100%{
  41.     transform: rotate(360deg)
  42.   }
  43. }


点击(此处)折叠或打开

  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.   }

阅读(2027) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册