如何在Click - Material Design上创建纹波效果 [英] How to create Ripple effect on Click - Material Design

问题描述

我是CSS动画新手，我一直试图通过查看他们的代码使他们的动画在最后几个小时工作，但现在我无法完成它。

我正在谈论这种效果： https://angular.io/ （菜单效果）。
基本上，这是一个点击动画，从鼠标光标展开一个圆圈。

看起来它归结为这两行：

  transition：box-shadow .4s cubic-bezier（.25，.8，.25,1），background-color .4s cubic-bezier .25，.8，.25,1）， -  webkit-transform .4s cubic-bezier（.25，.8，.25,1）; 
 transition：box-shadow .4s cubic-bezier（.25，.8，.25,1），background-color .4s cubic-bezier（.25，.8，.25,1），transform。 4s立方贝塞尔（.25，.8，.25,1）; 
  

PS：也许有些jQuery我没有看到。

解决方案

在我的一些项目中，我已经使用过这种代码。

使用jQuery，我们可以将效果定位到它的静态，然后添加 span 元素的onclick 。我添加了评论，因此更易于追踪。

此处演示

$ b jQuery

  $（div）。click（function（e）{
 
 //删除旧的
 $（。ripple ）.remove（）; 
 
 //设置
 var posX = $（this）.offset（）。left，
 posY = $（this）.offset（）。顶部，
 buttonWidth = $（this）.width（），
 buttonHeight = $（this）.height（）; 
 
 //添加元素
 $ （this）.prepend（< span class ='ripple'>< / span>）; 
 
 
 //让它变圆！
 if（buttonWidth > = buttonHeight）{
 buttonHeight = buttonWidth; 
} else {
 buttonWidth = buttonHeight; 
} 
 
 //获取元素的中心
 var x = e.pageX  -  posX  -  buttonWidth / 2; 
 var y = e.pageY  -  posY  -  buttonHeight / 2; 
 
 
 //添加涟漪CSS并启动动画
 $（。ripple）。css（{
 width：buttonWidth，
 height：buttonHeight，
 top：y +'px'， 
 left：x +'px'
}）。addClass（rippleEffect）; 
}）; 
  

CSS

  .ripple {
 width：0; 
 height：0; 
 border-radius：50％; 
 background：rgba（255,255,255，0.4）; 
 transform：scale（0）; 
位置：绝对; 
 opacity：1; 
} 
 .rippleEffect {
动画：rippleDrop .6s linear; 
} 
 
 @keyframes rippleDrop {
 100％{
 transform：scale（2）; 
 opacity：0; 
} 
} 
  

I'm new to CSS animations and I've been trying to make their animation work for the last hours by looking at their code, but I can't make it work for now.

I'm talking about this effect: https://angular.io/ (menu effect). Basically, it's an animation on click that spreads a circle from the mouse cursor.

Seems it comes down to these 2 lines:

transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);
transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),transform .4s cubic-bezier(.25,.8,.25,1);

PS: Maybe there's some jQuery I didn't see.

解决方案

I have used this sort of code before on a few of my projects.

Using jQuery we can position the effect to its not just static and then we add the span element onclick. I have added comments so it makes it easier to follow.

Demo Here

jQuery

$("div").click(function (e) {

  // Remove any old one
  $(".ripple").remove();

  // Setup
  var posX = $(this).offset().left,
      posY = $(this).offset().top,
      buttonWidth = $(this).width(),
      buttonHeight =  $(this).height();

  // Add the element
  $(this).prepend("<span class='ripple'></span>");


 // Make it round!
  if(buttonWidth >= buttonHeight) {
    buttonHeight = buttonWidth;
  } else {
    buttonWidth = buttonHeight; 
  }

  // Get the center of the element
  var x = e.pageX - posX - buttonWidth / 2;
  var y = e.pageY - posY - buttonHeight / 2;


  // Add the ripples CSS and start the animation
  $(".ripple").css({
    width: buttonWidth,
    height: buttonHeight,
    top: y + 'px',
    left: x + 'px'
  }).addClass("rippleEffect");
});

CSS

.ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  position: absolute;
  opacity: 1;
}
.rippleEffect {
    animation: rippleDrop .6s linear;
}

@keyframes rippleDrop {
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

这篇关于如何在Click - Material Design上创建纹波效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！