Question

我正在学习教程 (https://www.youtube.com/watch?v=QTHRWGn_sJw&t=119s)，但无法进行转换。单击播放按钮时必须弹出音乐信息框。音乐信息有标题和进度条。我对 JS 很陌生，希望得到任何帮助。谢谢

HTML 是这样的

<div class="music-container" id="music-container">
    <div class="music-info">
        <h4 id="title">Alone
        </h4>
        <div class="progress-container"  id="progress-container">
            <div class="progress" id="progress">

            </div>
        </div>
    </div>

    <audio src="~/music/Alone.mp3" id="audio"></audio>
    <div class="img-container">
        <img src="~/image/Alone.jpg" alt="music-cover" id="cover" />
    </div>

    <div class="navigation">
        <button id="prev" class="action-btn">
            <i class="fas fa-backward"></i>
        </button>
        <button id="play" class="action-btn action-btn-big">
            <i class="fas fa-play"></i>
        </button>
        <button id="next" class="action-btn">
            <i class="fas fa-forward"></i>
        </button>
    </div>

</div>

用于过渡的 CSS 为

.music-info {
    background-color: rgba(255,255,255,0.5);
    border-radius: 15px 15px 0 0;
    position: absolute;
    top: 0;
    left: 20px;
    padding: 10px 10px 10px 60px;
    width: calc(100% - 40%);
    opacity: 0;
    transform: translateY(0%);
    transition: transform 0.3s ease-in, opacity 0.3s ease-in;
    text-align: center;
}
.music-info h4{
    margin :0;
}
.music-container .play .music-info{
    opacity:1;
    transform: translateY(-100%);
}
.progress-container{
    background:white;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 0;
    height:4px;
    width:100%;
}
.progress{
    background-color:#fe8daa;
    border-radius:5px;
    height:100%;
    width:0;
    transition: width 0.1s linear;
}

JS 就像


        function playSong() {
            musicContainer.classList.add('play')
            playBtn.querySelector('i.fas').classList.remove('fa-play')
            playBtn.querySelector('i.fas').classList.add('fa-pause')

            audio.play();
        }

        function pauseSong() {
            musicContainer.classList.remove('play')
            playBtn.querySelector('i.fas').classList.add('fa-play')
            playBtn.querySelector('i.fas').classList.remove('fa-pause')

            audio.pause();
        }

        //get duration in current time
        function updateProgress(e) {
            const {duration, currentTime} = e.srcElement
            const progressPercent = (currentTime / duration) * 100
            progress.style.width = '${progressPercent}%'
        }

        //pass an event object e
        function setProgress(e) {
            const width = this.clientWidth
            const clickX = e.offsetX
            alert("hi");
            //console.log(clickX)
            const duration = audio.duration

            audio.currentTime = (clickX / width) * duration
        }
   //Event listeners
       //play
        playBtn.addEventListener('click', () => {
            const isPlaying = musicContainer.classList.contains('play')

            if (isPlaying) {
                pauseSong()
            }
            else {
                playSong()
            }
        })

        //change song
        prevBtn.addEventListener('click', prevSong)
        nextBtn.addEventListener('click', nextSong)

        audio.addEventListener('timeupdate', updateProgress)
        progressContainer.addEventListener('click' , setProgress)

Answer 1

我发现了错误。它在

.music-container .play .music-info{
opacity:1;
transform: translateY(-100%);

}

.music-container 和 .play 类之间不应有任何空格。应该是这样的

.music-container.play .music-info{
opacity:1;
transform: translateY(-100%);

} 我还要补充一点， ${progress-container}% 应该有反引号，这对我来说是一个新概念。否则进度容器将无法工作。

CSS Transition/Transform 在点击播放按钮时不起作用

1 个答案: