前端一个简单的点击动画效果

在需求里面需要在还原地图上面的手势操作以及点击动画效果。因此使用div写出一个简单的点击动态效果。

html

<!-- 点击动效 -->
<div class="waves-animation" *ngIf="isclick" [style.top]="animation.top" [style.left]="animation.left"></div>

css

.waves-animation {
    border-radius: 50%;
    background-color: gray;
    z-index: 998;
    position: absolute;
    transform: translate(-50%, -50%);
    animation-name: animation;
    animation-duration: .5s;
}

@keyframes animation {
    from {
        width: 0px;
        height: 0px;
        opacity: 1;
    }

    to {
        width: 30px;
        height: 30px;
        opacity: 0;
    }
}

js

  public animation = {
    top: '0',
    left: '0'
  };
    document.getElementById('model-container').addEventListener('click',($event)=>{
     this.animation.top = ($event.offsetY) + 'px';
     this.animation.left = ($event.offsetX) + 'px';
})