首页 > 其他 > 详细

点击图片旋转

时间:2021-01-12 16:56:06      阅读:26      评论:0      收藏:0      [点我收藏+]

记录一下点击图片实现旋转功能

html中

<img src="../../assets/404_imaages alt :class="[rotate === 0 ? ‘go‘: rotate === 1 ? ‘go1‘ : rotate === 2 ? ‘go2‘ :  rotate === 3 ? ‘go3‘ :‘go4‘]" @click="start"/>

js中

data() {
    return {
      rotate: 4,
      count:0,
  };
  },
methods: {
    start() {
      this.count++;
      switch(this.count%4){
       case 0 :
         this.rotate = 0;
          setTimeout(() => {
            this.rotate = 4;
          }, 700);
          break;
        case 1 :
          this.rotate = 1;
          break;
        case 2 :
          this.rotate = 2;
          break;
        case 3 :
          this.rotate = 3;
          break;
      }

style中

.go {
 transform: rotate(360deg);
  transition: all 2s;
}
.go1{
 transform:ratate(90deg);
 transition: all 2s;
}
.go2{
 transform:ratate(180deg);
transition:all 2s;
}
.go3{
 transform:ratate(270deg);
 transtion:all 2s;
}
.go4{
 transform:ratate(0deg);
transtion:all 2s;
}

 

点击图片旋转

原文:https://www.cnblogs.com/xiaoyiyiaixuexi/p/14267308.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!