Jiga

Learn something new everyday.

December 21, 2024

MOST COMMENTED

This flip animation will be a perfect use-case for enable/disable UI actions.

We’ll be using rotateY transform function to achieve this flip animation.

Here is a simple HTML page with a few font awesome icons in both enabled and disabled states (we’ll be adding CSS for these states later) and jquery included for click actions.

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
  </head>
  <body>
    <i class="fa fa-envelope enabled"></i>
    <i class="fa fa-comment-alt enabled"></i>
    <i class="fa fa-camera disabled"></i>
    <i class="fa fa-bell disabled"></i>
  </body> 
</html>

Here is the CSS for enabled and disabled states with the rotateY animation.

.flip {
    animation: flip-icon 0.3s ease-in-out;
}

body {
  text-align: center; 
  width: 100%;
}

.fa {
  cursor: pointer;
  font-size: 48px; 
  margin: 24px;
}

.fa.enabled {
     color: #f44336;
 }
 .fa.disabled {
     color: grey;
 }

@keyframes flip-icon {
    0% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

Here is the relevant click actions that will add or remove appropriate classes to start and reset the animation.

 $('body').on('click', '.fa.enabled, .fa.disabled', function iconClick() {
            const icon = $(this);
            icon.addClass('flip');
            setTimeout(() => { icon.removeClass('flip'); }, 300);
            if (icon.hasClass('enabled')) {
                setTimeout(() => {  
                  icon.removeClass('enabled');
                  icon.addClass('disabled'); 
                }, 150);
            } else {
              setTimeout(() => {  
                  icon.removeClass('disabled');
                  icon.addClass('enabled'); 
                }, 150);
            }
        });

Once you have the above code, you’ll achieve something like this:

Full Source Code can be found in this pen.

Leave a Reply

Your email address will not be published. Required fields are marked *

Flutter - Local push notifications

December 14, 2020

Using tableLayout CSS property with TypeScript

December 21, 2020