< img ref = ' mp3Img' src = " ../../assets/images/xxxxx.png" alt />
if ( val. includes ( 'mp3' ) ) {
let _this = this
_this. $refs. mp3Img. classList. add ( 'img' )
this . $refs. audio. addEventListener ( 'play' , function ( ) {
_this. $refs. mp3Img. style[ 'animation-play-state' ] = 'running'
} )
this . $refs. audio. addEventListener ( 'pause' , function ( ) {
_this. $refs. mp3Img. style[ 'animation-play-state' ] = 'paused'
} )
this . $refs. audio. src = val
return
}
this . $refs. mp3Img. classList. remove ( 'img' )
.img {
z-index : 1;
animation : rotateAlbumArt 3s linear 0s infinite;
animation-play-state : paused;
}
@keyframes rotateAlbumArt {
0% {
-webkit-transform : rotateZ ( 0) ;
transform : rotateZ ( 0) ;
}
100% {
-webkit-transform : rotateZ ( 360deg) ;
transform : rotateZ ( 360deg) ;
}
}