Mimicking the Animation effects of the Material UI framework

However, I’m not going to show you how to use the Material UI. Instead, I’m going to show you how to implement animation effects within the Material UI, such as a wave diffusion animation when a button is clicked, a form gets focus animation, and so on.

Note: To use the following animation effects, you must import jQuery.

First, click the button will appear wave diffusion animation effect

I made the waves darker here for effect.

First look at the effect:

Am ICopy the code

CSS styles:

button { outline: none; position: relative; overflow: hidden; padding: 5px 10px; background: #fff; border: 1px solid #d9d9d9; transition: all .3s; } .ripple { width: 0; height: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); -webkit-transform: scale(0); transform: scale(0); position: absolute; opacity: 1; }. RippleEffect {-webkit-animation: rippleEffect 2s cubic bezier(0.23, 1, 0.32, 1); Animation: rippleEffect 2s Cubic bezier(0.23, 1, 0.32, 1); } @keyframes rippleEffect { 100% { transform: scale(2); opacity: 0; } } @-webkit-keyframes rippleEffect { 100% { -webkit-transform: scale(2); opacity: 0; }}Copy the code

js:

function ripple(event, $this) {   
  event = event || window.event;   
  var x = event.pageX || event.originalEvent.pageX;   
  var y = event.pageY || event.originalEvent.pageY;   
  var wx = $this.width();   
  x = x - $this.offset().left - wx / 2;   
  y = y - $this.offset().top - wx / 2;   
  var span = '
       
';   
  $this.prepend(span);   
  $(".ripple").css({   
  width: wx,   
  height: wx,   
  top: y + "px",   
  left: x + "px"   
  }).addClass("rippleEffect");   
  $(document).one("webkitAnimationEnd animationend", ".ripple", function() {   
    $(".ripple").remove();   
  });   
}

$("button").on("click", function(e) {   
  ripple(e, $(this));   
});Copy the code

Second, the form gets focus animation

The effect is as follows:

Div layout:

       
   
  
           
  
        
   
    
         
   
  
        
   

       
Copy the code

.material-box {
				position: relative;
				width: 200px;
				height: 30px;
			}
			
			.material-box input {
				border: none;
				width: 100%;
				height: 30px;
				border-bottom: 1px solid rgb(224, 224, 224);
				outline: none;
			}
			
			.material-box hr {
				position: absolute;
				top: 100%;
				width: 100%;
				margin: 0 auto;
				border-top: 2px solid rgb(0, 188, 212);
				transform: scale(0);
				transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
			}Copy the code

var inputs = document.querySelector("input");
			var hr = document.querySelector("hr");
			inputs.addEventListener("focus", function() {
				hr.style.transform = "scale(1)";
			});
			inputs.addEventListener("blur", function() {
				hr.style.transform = "scale(0)";
			});
			$("button").on("click", function(e) {
				ripple(e, $(this));
			});Copy the code

      
   
  
       
   
  
          

      
Copy the code

.ww-checkbox {
				display: inline-block;
				position: relative;
				width: 20px;
				height: 20px;
			}
			
			.ww-checkbox input {
				opacity: 0;
				width: 20px;
				height: 20px;
			}
			
			.ww-checkbox-box {
				width: 20px;
				height: 20px;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
				line-height: 16px;
				border: 1px solid #D9D9D9;
				text-align: center;
			}
			
			.ww-checkbox-box .fa {
				display: none;
				font-size: 12px;
				font-weight: normal;
				color: #fff;
			}
			
			.ww-checkbox.active .ww-checkbox-box {
				background-color: #49be38;
				border: 1px solid #fff;
			}
			
			.ww-checkbox.active .fa {
				display: inline;
			}Copy the code

$(".ww-checkbox").on("click", function() { if ($(this).hasClass("active")) { $(this).removeClass("active"); } else { $(this).addClass("active"); }});Copy the code