按钮内图像的动画

Question

我是这个编码领域的新手，我认为我的问题对于像你们这样有经验的人来说很简单 guys.I 我正在尝试为 button.When 中的图像制作动画我点击按钮我需要旋转图像 360deg.I 不知道我在这里做错了什么是我的 HTML 和 CSS code.Please 帮助

.syncRotate {
  -webkit-transition: 500ms ease all !important;
  -moz-transition: 500ms ease all !important;
  -o-transition: 500ms ease all !important;
  transition: 500ms ease all !important;
  -webkit-transform: rotate(360deg) !important;
}

<button class="iconBtn" mdTooltipPosition="above" mdTooltip="Sync User" (click)="sync()">
    <img class="syncRotate" style="width:20px;background-color: #a6a6a6;border-radius: 13px;padding:2px;" src="../../assets/images/icons/sync.svg" alt="Sync">
</button>

Answer 1

如果您只需要使用 transition 就可以了。!

.syncRotate {
  -webkit-transition: 500ms ease all;
  -moz-transition: 500ms ease all;
  -o-transition: 500ms ease all;
  transition: 500ms ease all;
  -webkit-transform: rotate(0deg);
}

.syncRotate:active {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

<button class="iconBtn" mdTooltipPosition="above" mdTooltip="Sync User" (click)="sync()">
    <img class="syncRotate" style="width:20px;background-color: #a6a6a6;border-radius: 13px;padding:2px;" src="https://lh6.ggpht.com/bE_u2kFoX28G428YH1jpWTMoaZ3B9cokstrKxD82zj7hoBNL-U1wiAVddau3mvvUpPoD=w300" alt="Sync">
</button>

如果你想让它制作漂亮的动画使用CSS动画

@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

.syncRotate {
  -webkit-transform: rotate(0deg);
}

.syncRotate:active {
  animation: rotation 500ms ease-in-out forwards;
}

<button class="iconBtn" mdTooltipPosition="above" mdTooltip="Sync User" (click)="sync()">
    <img class="syncRotate" style="width:20px;background-color: #a6a6a6;border-radius: 13px;padding:2px;" src="https://lh6.ggpht.com/bE_u2kFoX28G428YH1jpWTMoaZ3B9cokstrKxD82zj7hoBNL-U1wiAVddau3mvvUpPoD=w300" alt="Sync">
</button>

通过将 500 毫秒更改为 400 毫秒左右，我们可以使其变快 并将其更改得更高将使动画和过渡 变慢，例如 900 毫秒或 1 秒.

注意： 因为我们 仅使用 CSS 动画和过渡仅在用户单击按钮。所以在你的情况下两者都是一样的。

Answer 2

360度无点击旋转

.syncRotate {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.syncRotate:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

<button class="iconBtn" mdTooltipPosition="above" mdTooltip="Sync User" (click)="sync()">
    <img class="syncRotate" style="width:20px;background-color: #a6a6a6;border-radius: 13px;padding:2px;" src="https://lh6.ggpht.com/bE_u2kFoX28G428YH1jpWTMoaZ3B9cokstrKxD82zj7hoBNL-U1wiAVddau3mvvUpPoD=w300" alt="Sync">
</button>

Answer 3

普通 JS 解决方案:

将旋转 class 添加到具有 classList.add()
在结束后删除旋转 class 这样下次点击将根据需要旋转 classList.remove() inside setTimeout( ).
您可以从过渡毫秒时间调整旋转速度（演示中为 1500），确保将其时间设置为等于或高于过渡时间。

document.querySelector(".iconBtn").addEventListener('click', function() {
  document.querySelector("img").classList.add("syncRotate");
  //remove class after rotation is over so next click will rotate again
  setTimeout(function() {
    document.querySelector("img").classList.remove('syncRotate');
  }, 1500);
});

.syncRotate {
  -webkit-transition: 1500ms ease all;
  -moz-transition: 1500ms ease all;
  -o-transition: 1500ms ease all;
  transition: 1500ms ease all;
  -webkit-transform: rotate(360deg);
}

<button class="iconBtn" mdTooltipPosition="above" mdTooltip="Sync User" (click)="sync()">
  <img class="image" style="width:20px;background-color: #a6a6a6;border-radius: 13px;padding:2px;" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="Sync">
</button>

jQuery解法:

使用 addClass()
在结束后删除旋转 class 这样下一次点击将根据需要旋转 removeClass() inside setTimeout().
您可以从过渡毫秒时间调整旋转速度（演示中为 1500），确保将其时间设置为等于或高于过渡时间。

$(".iconBtn").on('click', function() {
    $('img').addClass("syncRotate");
    //remove class after rotation is over so next click will rotate again
    setTimeout(function() {
        $('img').removeClass('syncRotate');
    }, 1500);
});

.syncRotate {
  -webkit-transition: 1500ms ease all;
  -moz-transition: 1500ms ease all;
  -o-transition: 1500ms ease all;
  transition: 1500ms ease all;
  -webkit-transform: rotate(360deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="iconBtn" mdTooltipPosition="above" mdTooltip="Sync User" (click)="sync()">
  <img class="image" style="width:20px;background-color: #a6a6a6;border-radius: 13px;padding:2px;" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="Sync">
</button>

按钮内图像的动画

Animation for image inside the Button

html

css

typescript

angular2-template