我遇到了与此处突出显示的问题类似的问题
https://github.com/katspaugh/wavesurfer.js/issues/960
我有 wavesurfer 出现在 React 组件中。如果它是使用其父 display:block 渲染的，那么一切都很好，但是如果它渲染 display:none，那么稍后更改为 display:block 波不会渲染。实际的“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,
}),
],
})
是家长
<div className={!isSceneMenuVisible ? 'hide' : 'show'}>
和 CSS
.hide {
display: none;
}
.show {
display: block;
}