Question

我希望按钮和链接上具有材质设计的波纹效果。

在线搜索时，我在npm上找到了ng2-ripple-directive，在指令的GitHub上找到了gist。

不幸的是，这不是开箱即用的，所以我对其进行了修改并包括一个模块，以便可以将其导入到我的应用程序中。

它的一半工作原理是单击时会产生涟漪效果，而不仅仅是在按钮上，它是全屏显示。

我摆弄css和指令没有成功。有人可以协助吗？

ripple-effect.directive.ts

import { Directive, HostListener, HostBinding, Input } from '@angular/core';
import * as htmlElementStringify from 'html-element-stringify';


@Directive({
    selector: 'button[appRipple], a[appRipple]'
})

export class RippleEffectDirective {
    isRippling = false;
    @Input() appRipple = '#fff';
    @HostBinding('class.ripple') public ripple = 'true';
    @HostBinding('style.position') public position = '"relative"';
    @HostBinding('style.outline') public outline = '"none"';
    @HostListener('click', ['$event']) onClick(evt: MouseEvent) {
        evt.preventDefault();

        if (this.isRippling) {
            return;
        }

        this.isRippling = true;

        const button: any = evt.target;
        const div = document.createElement('div');
        const xPos = evt.pageX - button.offsetLeft;
        const yPos = evt.pageY - button.offsetTop;

        div.classList.add('ripple-effect');
        div.style.height = button.clientHeight;
        div.style.width = button.clientHeight;
        div.style.top = (yPos - (button.clientHeight / 2)) + 'px';
        div.style.left = (xPos - (button.clientWidth / 2)) + 'px';
        div.style.background = this.appRipple;

        button.insertAdjacentHTML('beforeend', htmlElementStringify(div));

        window.setTimeout(() => {
            button.removeChild(button.querySelector('.ripple-effect'));
            this.isRippling = false;
        }, 3000);
    }
}

ripple-effect.directive.module.ts

import { NgModule } from '@angular/core';
import { RippleEffectDirective } from './ripple-effect.directive';

@NgModule({
    imports: [],
    declarations: [RippleEffectDirective],
    exports: [RippleEffectDirective],
})

export class RippleEffectDirectiveModule {

    static forRoot() {
        return {
            ngModule: RippleEffectDirectiveModule,
            providers: [],
        };
    }
}

ripple-effect.css

.ripple {
   overflow: hidden;
}

.ripple .ripple-effect {
    position: absolute;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background: white;
    animation-name: ripple-animation;
    animation-duration: 2s;
}

@keyframes ripple-animation {
    from {
    transform: scale(1);
    opacity: 0.4;
    }
    to {
    transform: scale(100);
    opacity: 0;
    }
}

Answer 1

我仍然希望通过一条指令来完成此工作，但是由于激动，我继续进行搜索，并且由于CodeBurst的帮助，仅使用CSS就可以实现涟漪效果。我现在只用CSS就可以达到我想要的涟漪效果。希望其他人可能会觉得有用。

我正在使用Bootstrap 4和Angular 6。

只需将以下内容插入您的根styles.css并将“ ripple”类添加到您的按钮即可：

.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #555 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s,
    opacity 1s;
} 

.ripple:active:after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
}

波纹效果指令是全屏显示，而不是仅在元素上

1 个答案: