JSFiddle - React, Tailwind, and code Playground

by Shaxrillo

HTML

<div ng-app='app' ng-controller='appCtrl'>
    <div angular-ripple class='btn'>Some Values</div>
</div>

CSS

[angular-ripple] {
     position: relative;
     overflow: hidden;
     border: none;
     background: none;
 }
 .angular-ripple {
     display: block;
     position: absolute;
     background-color: rgba(0, 0, 0, 0.1);
     border-radius: 50%;
     -moz-transform: scale(0);
     -webkit-transform: scale(0);
     transform: scale(0);
 }
 .angular-ripple.animate {
     -moz-animation: ripple 0.35s linear;
     -webkit-animation: ripple 0.35s linear;
     animation: ripple 0.35s linear;
 }
 @-moz-keyframes ripple {
     100% {
         opacity: 0;
         -moz-transform: scale(2.5);
         -webkit-transform: scale(2.5);
         transform: scale(2.5);
     }
 }
 @-webkit-keyframes ripple {
     100% {
         opacity: 0;
         -moz-transform: scale(2.5);
         -webkit-transform: scale(2.5);
         transform: scale(2.5);
     }
 }
 @keyframes ripple {
     100% {
         opacity: 0;
         -moz-transform: scale(2.5);
         -webkit-transform: scale(2.5);
         transform: scale(2.5);
     }
 }
 /*demo styles*/
 body {
     font-family: Helvetica Neue;
     text-align: center;
     -webkit-font-smoothing: antialiased;
 }
 .btn {
     -webkit-user-select: none;
     cursor: pointer;
     display: inline-block;
     padding: 3em 5em;
     /*margin: 10em auto;*/
     border-radius: 2px;
     background-color: salmon;
     color: white;
 }
 a, a:visited {
     color: #444;
 }

JavaScript

var rip = angular.module('angularRipple', []);

    rip.directive('angularRipple', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var x, y, size, offsets;

                element.on('click touchstart', function (e) {
                    var ripple = this.querySelector('.angular-ripple');
                    console.log(ripple)
                    var eventType = e.type;
                    // Ripple
                    if (ripple === null) {
                        // Create ripple
                        ripple = document.createElement('div');
                        ripple.classList.add('angular-ripple');
                        

                        // Prepend ripple to element
                        this.insertBefore(ripple, element.lastChild);

                        // Set ripple size
                        //alert(ripple.offsetHeight)
                        if (!ripple.offsetHeight && !ripple.offsetWidth) {
                            size = Math.max(element[0].offsetWidth, element[0].offsetHeight);
                            ripple.style.width = size + 'px';
                            ripple.style.height = size + 'px';
                        }
                    }

                    // Remove animation effect
                    // alert(ripple.classList)
                    ripple.classList.remove('animate');
                    // alert(ripple.classList)

                    // get click coordinates by event type
                    if (eventType === 'click') {
                        x = e.pageX;
                        y = e.pageY;
                    } else if (eventType === 'touchstart') {
                        x = e.changedTouches[0].pageX;
                        y = e.changedTouches[0].pageY;
                    }

                    // set new ripple position by click or touch position
                    function getPos(element) {
                 ...