Question

我遇到与此处突出显示的问题类似的问题

https://github.com/katspaugh/wavesurfer.js/issues/960

我有一个出现在React组件中的waveurfer。如果它使用其父显示：block进行渲染，那么一切都很好，但是如果它渲染display：none，则稍后更改为display：block wave不会渲染。实际的波浪＆＃39; element仍然具有属性display＆＃39; none＆＃39;

这是waveurfer代码

this.wavesurfer = WaveSurfer.create({
  container: this.$waveform,
  waveColor: 'grey',
  progressColor: 'purple',
  backend: 'MediaElement',
  height: 80,
  width: '100%',
  plugins: [
    TimelinePlugin.create({
      container: '#wave-timeline',
    }),
    RegionPlugin.create({
      dragSelection: true,
      drag: false,
    }),
  ],
})

它的父母

    <div className={!isSceneMenuVisible ? 'hide' : 'show'}>

和CSS

.hide {
  display: none;
}
.show {
  display: block;
}

Answer 1

啊......

使用visibility: hidden代替它，否则无法获得它的尺寸。

https://github.com/katspaugh/wavesurfer.js/issues/910

如果父显示：阻止，Wavesurfer不会渲染

1 个答案: