Added height animation to visualizer
parent
1868c88b7e
commit
ff20b7b668
|
|
@ -38,12 +38,14 @@ export default {
|
||||||
barHeight: 1,
|
barHeight: 1,
|
||||||
barGap: null,
|
barGap: null,
|
||||||
autoCenter: true,
|
autoCenter: true,
|
||||||
height: 64,
|
responsive: true,
|
||||||
responsive: true
|
height: 64
|
||||||
})
|
})
|
||||||
this.wavesurfer.load('/static/demo/music.mp3')
|
this.wavesurfer.load('/static/demo/music.mp3')
|
||||||
this.wavesurfer.on('ready', () => {
|
this.wavesurfer.on('ready', () => {
|
||||||
this.duration = formatSeconds(this.getDuration())
|
this.duration = formatSeconds(this.getDuration())
|
||||||
|
this.wavesurfer.container.style['height'] = '100%'
|
||||||
|
console.log(this.wavesurfer.container)
|
||||||
})
|
})
|
||||||
let currentWidth = 0
|
let currentWidth = 0
|
||||||
let hoverStatus = false
|
let hoverStatus = false
|
||||||
|
|
@ -148,8 +150,22 @@ section.player
|
||||||
.visualizer
|
.visualizer
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
height: 64px
|
height: 64px
|
||||||
|
position: relative
|
||||||
|
div
|
||||||
|
position: absolute
|
||||||
|
left: 0
|
||||||
|
top: 0
|
||||||
|
bottom: 0
|
||||||
|
margin: auto
|
||||||
|
transition: height 500ms ease
|
||||||
|
height: 0px
|
||||||
|
width: 100%
|
||||||
|
&.shade
|
||||||
|
pointer-events: none
|
||||||
|
opacity: 0.2
|
||||||
wave
|
wave
|
||||||
overflow-x: hidden !important
|
overflow-x: hidden !important
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
transition: width 200ms ease
|
transition: width 200ms ease
|
||||||
|
height: 100% !important
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue