Question

我正在将0到1之间的不透明度渐变应用于某些iframe。通过使用ForeignObject，iframe位于svg中。它从状态0开始。一旦设置为1，您就只能看到iframe，当我使用鼠标事件处理将鼠标悬停在任何组件上之后，才能看到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} }}`
        })
    )
)

除非将鼠标悬停在组件上，否则角度动画将不会显示更改

0 个答案: