我在这里使用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>
tooltip.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链接为here:
我寻找的结果是:
答案 0 :(得分:1)
这是设置叠加层的方式:
您遇到的闪烁是由于从未解决的情况:
这种情况不断发生,这就是为什么您会出现闪烁效果的原因。
作为解决方案,请将以下代码添加到您的 tooltip.component.css 中,该代码将叠加层放置在按钮下方,这样就不会发生递归闪烁:
::ng-deep .cdk-overlay-connected-position-bounding-box{top:60px !important; position:absolute;}
更新:对于更大的按钮,可以更改最大值,以确保覆盖层从按钮下方开始并且没有重叠。 demo here
答案 1 :(得分:0)
对于上面的例子中寻找相对位置的每个人:
删除
::ng-deep .cdk-overlay-connected-position-bounding-box{top:60px !important; position:absolute;}
!添加
@import '~@angular/cdk/overlay-prebuilt.css';
进入您的styles.css。永远带我去寻找答案。
来源:https://medium.com/angular-in-depth/building-tooltips-for-angular-3cdaac16d138
https://stackblitz.com/edit/building-tooltip
除了这个最小的变化外,它们完全相同:)