Animation de l'image à l'intérieur du bouton

Question

Je suis nouveau dans ce domaine de codage, je pense que mon problème est simple pour les personnes expérimentées comme vous tous les gars.J'essaie d'animer l'image qui est à l'intérieur du bouton.Lorsque je clique sur le bouton, j'ai besoin que l'image soit tournée de 360deg.Je ne sais pas ce que je fais mal voici mon code HTML et CSS.S'il vous plaît aidez.

.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

Cela vous conviendra si vous ne souhaitez utiliser que les éléments suivants 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>

SI vous voulez qu'il fasse une belle animation en utilisant Animation 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>

En changeant 500ms à 400ms ou plus, nous pouvons le rendre rapide. et le changer plus haut rendra l'animation et la transition plus lent, par exemple 900 ms ou 1 s .

Note : Parce que nous sommes en utilisant uniquement les CSS l'animation et la transition ne durent que pendant que l'utilisateur clique sur le bouton. Donc, dans votre cas, les deux seront identiques.

Answer 2

Rotation de 360 degrés sans clic

.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

Solution Vanilla JS :

1. Ajoutez la classe de rotation à l'élément avec classList.add()
2. Supprimez la classe de rotation une fois qu'elle est terminée pour que le prochain clic fasse tourner comme vous le souhaitez avec classList.remove() à l'intérieur de setTimeout() .

3. Vous pouvez régler la vitesse de rotation à partir du temps de transition ms (1500 sur la démo), assurez-vous de régler son temps soit égal ou supérieur au temps de transition.

   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>

Solution jQuery :

1. Ajoutez la classe de rotation à l'élément avec addClass()
2. Supprimez la classe de rotation une fois qu'elle est terminée pour que le prochain clic fasse tourner comme vous le souhaitez avec removeClass() à l'intérieur de setTimeout() .

3. Vous pouvez régler la vitesse de rotation à partir du temps de transition ms (1500 sur la démo), assurez-vous de régler son temps soit égal ou supérieur au temps de transition.

   $(".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>