CODEWITHSUNDEEP
htmlcsstypescriptangular2-template
Musheer Aiman
Musheer Aiman

Reputation: 175

Animation for image inside the Button

I am new to this coding field, I think my issue is simple for experienced people like you all guys.I am trying to animate the image which is inside the button.When I click on the button I need the image to be rotated 360deg.I dont know what wrong I am doing here is my HTML and CSS code.Please help

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

Upvotes: 5

Views: 2438

Answers (3)

Syden
Syden

Reputation: 8625

Vanilla JS solution:

  1. Add the rotation class to the element with classList.add()
  2. Remove the rotation class after it's over so next click will rotate as desired with classList.remove() inside of setTimeout().
  3. You can tweak rotation speed from transition ms time (1500 on demo), make sure to set it's time either equal or higher than the transition time.

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 solution:

  1. Add the rotation class to the element with addClass()
  2. Remove the rotation class after it's over so next click will rotate as desired with removeClass() inside of setTimeout().
  3. You can tweak rotation speed from transition ms time (1500 on demo), make sure to set it's time either equal or higher than the transition time.

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

Upvotes: 1

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

This will work for you if you only want it using 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>

IF you want it to make nice animation using CSS animation

@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>

BY changing 500ms to 400ms or so we can make it fast and changing it higher will make the animation and transition slower eg 900ms or 1s.

Note: Because we are only using CSS the animation and transition only last while the user is clicked on the button. SO in your case both will be same.

Upvotes: 3

Dom
Dom

Reputation: 343

360deg rotate without click

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

Upvotes: 1

Related Questions