html style.backgroundImage更改覆盖图像过渡

ygya80vv 于 2023-08-01 发布在其他

关注(0)|答案(1)|浏览(64)

我正在尝试为播放器(check video)制作一个按钮
它的工作，但使按钮似乎“按下”，我必须改变其背景图像点击，但这似乎覆盖了过渡，已经存在。负责旋转的部分仍然工作，不像图像交换。
暂停时不更改图像/将其更改为初始图像不会产生任何效果。
我认为解决方案可能只是使用@keyframes并手动完成所有操作，但我觉得有一个更清晰的解决方案。
下面是一个演示：（我需要这样做，当它的点击两次浅蓝色方块仍然过渡回橙子）

document.addEventListener("DOMContentLoaded", function () {
    let state = "pause";

    const playButton = document.getElementById("playIcon")

    function playButtonClick() {
        if (state === 'play') {
            state = 'pause';
            playButton.classList.remove("transitionBane");
            playButton.style.backgroundImage = "url('https://placehold.co/600x400/aliceblue/white')";
        } else {
            state = 'play';
            playButton.classList.add("transitionBane");
            playButton.style.backgroundImage = "url('https://placehold.co/600x400/gray/white')";
        }
    }

    addEventListener("click", playButtonClick)
});

#playIcon {
  top: 35%;
  left: 40%;
  position: absolute;
  background-color: transparent;
  background-repeat: no-repeat;
  background-image: url("https://placehold.co/600x400/orange/white");
  button:focus {outline:0;}
  background-size: 100% 100%;
  border: 0;
  width: 18%;
  height: 31.6%;
  z-index: 52;
  transform: rotate(0);
  //animation: playButtonSwap1 2s alternate infinite ease-in-out;
  transition: all 0.75s cubic-bezier(.71,0,.33,1.56) 0ms;
  cursor: pointer;
}

#playIcon:hover {
  transform: rotate(360deg);
  background-image: url("https://placehold.co/600x400/aliceblue/white");
}

.transitionBane {
  transition: none !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="playIcon"></button>
</body>
</html>

Html

来源：https://stackoverflow.com/questions/76753592/style-backgroundimage-change-overrides-image-transition

1条答案

按热度按时间

jtoj6r0c1#

我检查了双击功能，并删除背景图像在悬停选择器在这里作为我的理解你的问题，请检查，让我知道，如果这是不是对你有帮助。

document.addEventListener("DOMContentLoaded", function () {
    let state = "pause";

    const playButton = document.getElementById("playIcon")

    function playButtonClick(event) {
        if (state === 'play') {
            state = 'pause';
            playButton.classList.remove("transitionBane");
            
            if(event.detail==1){
               playButton.style.backgroundImage = "url('https://placehold.co/600x400/aliceblue/white')";
            }
              if(event.detail==2){
               playButton.style.backgroundImage = "url('https://placehold.co/600x400/orange/white')";
            }
         
        } else {
            state = 'play';
            playButton.classList.add("transitionBane");
            playButton.style.backgroundImage = "url('https://placehold.co/600x400/gray/white')";
        }
    }

    addEventListener("click", playButtonClick)
});

#playIcon {
  top: 35%;
  left: 40%;
  position: absolute;
  background-color: transparent;
  background-repeat: no-repeat;
  background-image: url("https://placehold.co/600x400/orange/white");
  button:focus {outline:0;}
  background-size: 100% 100%;
  border: 0;
  width: 18%;
  height: 31.6%;
  z-index: 52;
  transform: rotate(0);
  //animation: playButtonSwap1 2s alternate infinite ease-in-out;
  transition: all 0.75s cubic-bezier(.71,0,.33,1.56) 0ms;
  cursor: pointer;
}

#playIcon:hover {
  transform: rotate(360deg);

}

.transitionBane {
  transition: none !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="playIcon"></button>
</body>
</html>

赞(0）回复(0）举报 2023-08-01

我来回答

html style.backgroundImage更改覆盖图像过渡

1条答案

相关问题

热门标签

最新问答