javascript - 如果父级显示 :block，则 Wavesurfer 不呈现

Question

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

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

我在 React 组件中出现了 wavesurfer。如果它与它的父 display:block 一起渲染，那么一切都很好，但是如果它渲染 display:none，然后更改为 display:block，则 wave 不会渲染。实际的 'wave' 元素仍然具有显示 'none' 的属性

这是 wavesurfer 代码

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,
    }),
  ],
})

这是 parent

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

和 CSS

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

Answer 1

啊……

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

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