javascript - 将鼠标悬停在内容上时,在工具提示中显示图像会给我一个闪烁的效果
问题描述
我在这里使用 Angular。当将鼠标悬停在某些内容上时,我试图在工具提示中显示图像/视频。但是,当我将鼠标悬停在内容上时,图像在渲染之前会产生闪烁效果。过渡不像我将文本代替图像时那样平滑。我如何解决它?
我正在尝试将图像 src 设置为工具提示组件的输入。我有一个生成工具提示内容的指令。这里的代码如下:
app.component.html
<button awesomeTooltip="Hello World!" image="https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image">Hi there, I have a tooltip</button>
tooltip.component.ts
import { Component, Input } from '@angular/core';
import { animate, style, transition, trigger } from '@angular/animations';
@Component({
selector: 'awesome-tooltip',
styleUrls: ['./tooltip.component.css'],
templateUrl: './tooltip.component.html',
animations: [
trigger('tooltip', [
transition(':enter', [
style({ opacity: 0 }),
animate(300, style({ opacity: 1 })),
]),
transition(':leave', [
animate(300, style({ opacity: 0 })),
]),
]),
],
})
export class AwesomeTooltipComponent {
@Input() image=''
@Input() text = '';
}
tooltip.component.html
<div @tooltip>
<img [src]="image" width="20px" height="30px">
<!-- Hello -->
</div>
工具提示.directive.ts
import { ComponentRef, Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';
import { Overlay, OverlayPositionBuilder, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { AwesomeTooltipComponent } from './tooltip.component';
@Directive({ selector: '[awesomeTooltip]' })
export class AwesomeTooltipDirective implements OnInit {
@Input('awesomeTooltip') text = '';
@Input('image') image = '';
private overlayRef: OverlayRef;
constructor(private overlay: Overlay,
private overlayPositionBuilder: OverlayPositionBuilder,
private elementRef: ElementRef) {
}
ngOnInit(): void {
const positionStrategy = this.overlayPositionBuilder
.flexibleConnectedTo(this.elementRef)
.withPositions([{
originX: 'center',
originY: 'top',
overlayX: 'center',
overlayY: 'bottom',
offsetY: -8,
}]);
this.overlayRef = this.overlay.create({ positionStrategy });
}
@HostListener('mouseenter')
show() {
const tooltipRef: ComponentRef<AwesomeTooltipComponent>
= this.overlayRef.attach(new ComponentPortal(AwesomeTooltipComponent));
tooltipRef.instance.text = this.text;
tooltipRef.instance.image = this.image;
}
@HostListener('mouseout')
hide() {
this.overlayRef.detach();
}
}
stackblitz 链接在这里:
我正在寻找的结果是:
- 我应该能够从我想显示工具提示的标签发送图像 url。
- 工具提示应在其中显示该图像。
解决方案
这是设置叠加层的方式:
- 当您将鼠标悬停在按钮上时,叠加层变得可见
- 当您移动到按钮以外的任何位置时,叠加层会隐藏
您所经历的闪烁是由于一个永远无法解决的情况:
- 当您将鼠标悬停在按钮的底部时,覆盖层变得可见
- 但是由于覆盖从按钮的中间开始,从技术上讲,您现在将鼠标悬停在覆盖上(不再悬停在按钮上),因此覆盖变得隐藏
- 一旦覆盖层被隐藏,您就会回到上面的第 1点...
这种情况一直持续下去,这就是您体验闪烁效果的原因。
对于解决方案,请将以下代码添加到您的tooltip.component.css中,将叠加层放在按钮下方,这样就不会发生这种递归闪烁:
::ng-deep .cdk-overlay-connected-position-bounding-box{top:60px !important; position:absolute;}
更新:对于更大的按钮,可以更改顶部值以确保覆盖从按钮下方开始并且没有重叠。演示在这里
推荐阅读
- javascript - 如何将前一项附加到数组中的下一项?
- javascript - 尽管有几个 `try`-`catch` 块,但仍获得 UnhandledPromiseRejectionWarning
- javascript - 在 Firebase 中创建用户后获取身份提供者令牌
- ssl - curl 命令有效,但 C 程序失败 NSS:找不到客户端证书(未指定昵称)
- docker - Minikube 有 IP - 不能卷曲
- cplex - X 二进制变量和 W 是 dvar 浮点数。如果 Wi>0 然后 Xi=1,我想得到这个结果
- mysql - 如何选择没有实际分组项目的组
- r - 将 scale_color 与类日期变量一起使用会产生错误:as.Date.numeric(value) : 'origin' must be provided
- firebase - Flutter firebase_database 获取孩子
- google-apps-script - WebApp 内容长度响应标头