angular - 在我将鼠标悬停在组件上之前,角度动画不会显示更改
问题描述
我正在对某些 iframe 应用介于 0 和 1 之间的不透明度淡入淡出。iframe 使用 foreignObject 在 svg 中。它从状态 0 开始。一旦动画为 1,您只能在我将鼠标悬停在任何带有鼠标事件处理的组件上之后才能看到 iframe。状态为 1 后,可以清楚的看到状态变化 1 -> 0 与 0 -> 1 相比没有问题。
在此动画期间,控制台中没有错误。
我需要你的帮助来找出为什么 0 -> 1 状态动画不流畅。
这是组件:
musicpage.component.ts
private animatecontentfade(state: number) {
let params: any = {}
params[inputopacityname] = state
let animation = this.animator.create(this.castcontent, {
params: params
})
animation.onDone(() => {
this.changer.markForCheck()
})
animation.play()
}
musicpage.component.html
<svg>
<g class="content-page" #content>
<g class="scroll-box">
<g class="scroll-item">
<foreignObject width="100%" height="100%">
<xhtml:iframe width="100%" scrolling="no" frameborder="no"
class="music-player"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/689363290&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
</xhtml:iframe>
</foreignObject>
</g>
<g class="scroll-item">
<foreignObject width="100%" height="100%" y="230px">
<xhtml:iframe width="100%" frameborder="no"
class="music-player"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/689387281&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
</xhtml:iframe>
</foreignObject>
</g>
</g>
</g>
<g app-scrollview class="scroll-view" (scrollbuttonmoved)="onscroll($event)"></g>
</svg>
fadeout.ts(动画)
export const togglefade = animation(
animate(
'3s',
style({
opacity: `{{ ${inputopacityname} }}`
})
)
)
解决方案
推荐阅读
- python - 如何与自定义 numpy dtypes 交互
- c++ - 生成带有传递给模板的指针类型签名的函数
- java - 了解 Groovy 中的多维关联数组
- c++ - ALSA 的 snd_pcm_get_chmap 在 Ubuntu 18.04 上的默认设备(脉冲)上始终返回 NULL
- apache - mod_substitute 出现“行太长”错误
- azure - Terraform Azure:从打包程序映像和外部数据磁盘创建 Linux VM
- list - prolog中列表中数字的唯一性
- ruby - 在 rspec 中测试递归 IO 提示
- cypress - 是否可以使用柏树验证悬停文本?
- swift - 无法将类型“[Favorite.Type]”的返回表达式转换为返回类型“[Favorite]”