在angular js指令中创建涟漪效果

angular.module('app').directive('rippleEffect', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.on('click', function(event) {
        var ripple = document.createElement('span');
        ripple.classList.add('ripple');

        var diameter = Math.max(element[0].offsetWidth, element[0].offsetHeight);
        var radius = diameter / 2;

        ripple.style.width = ripple.style.height = diameter + 'px';
        ripple.style.left = (event.clientX - element[0].getBoundingClientRect().left - radius) + 'px';
        ripple.style.top = (event.clientY - element[0].getBoundingClientRect().top - radius) + 'px';

        element.append(ripple);

        setTimeout(function() {
          ripple.remove();
        }, 1000);
      });
    }
  };
});

.ripple {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  animation: rippleEffect 1s ease-out;
}

@keyframes rippleEffect {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

<button ripple-effect>Click me</button>