如何解决如何在工具提示中添加自定义动画
我已经使用Ngx Tippy wrapper创建了一个工具提示,它是Tippy.js的一个斜角版本。我已经为工具提示创建了一个自定义动画,但是它没有按预期工作。
问题-第一次显示工具提示时,自定义动画不起作用。从第二次开始,动画就开始播放。
我使用了下面的代码。有人知道为什么会这样吗?
Component.HTML-
<div class="sidebar">
<ul>
<li>
<a
href="javascript:void(0)"
ngxTippy
data-tippy-content="Home"
tippyClassName="custom-tooltip"
[tippyProps]="tippyProps"
>
<span class="icon-home"></span>
</a>
</li>
<li>
<a
href="javascript:void(0)"
ngxTippy
data-tippy-content="About us"
tippyClassName="custom-tooltip"
[tippyProps]="tippyProps"
>
<span class="icon-about-us"></span>
</a>
</li>
<li>
<a
href="javascript:void(0)"
ngxTippy
data-tippy-content="Blogs"
tippyClassName="custom-tooltip"
[tippyProps]="tippyProps"
>
<span class="icon-blog"></span>
</a>
</li>
</ul>
</div>
Component.ts-
import { NgxTippyProps } from "ngx-tippy-wrapper";
public tippyProps = {
arrow: false,placement: "right",animation: "custom-tooltip-animation",hideOnClick: true,inertia: true,offset: [0,5]
}
Component.css-
.custom-tooltip{
border-radius: 20px !important;
background: #3E3F5E !important;
line-height: 0 !important;
overflow: hidden;
}
.custom-tooltip .tippy-content{
padding: 0 12px !important;
line-height: 25px !important;
height: 25px;
color: #fff;
font-size: .75rem;
font-weight: 700;
text-transform: capitalize;
font-family: 'Rajdhani',sans-serif;
}
.custom-tooltip[data-out-of-boundaries] {
opacity: 0;
transform: translate(10px,0px);
visibility: hidden;
}
/* Right */
.custom-tooltip[data-placement^='right'][data-animation='custom-tooltip-animation'][data-state='hidden']{
opacity: 0;
transform: translate(10px,0px);
visibility: hidden;
}
.custom-tooltip[data-placement^='right'][data-animation='custom-tooltip-animation'][data-state='visible'] {
opacity: 1;
transform: translate(0px,0px);
visibility: visible;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。