如何在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.
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屋!