英文:
style.backgroundImage change overrides image transition
问题
我试图为一个播放器创建一个按钮(查看视频)。
它能够工作，但要使按钮看起来"按下"，我必须在点击时更改其背景图像，然而，这似乎会覆盖已经存在的过渡效果。负责旋转的部分仍然有效，但图像交换不起作用。
在暂停时不更改图像或将其更改为初始图像不起作用。
我认为解决方案可能只是使用@keyframes 并手动完成所有操作，但我觉得有一个更干净的解决方案。
这里有一个演示：（我需要点击两次时，浅蓝色方块仍然过渡回橙色）
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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)
});
<!-- language: lang-css -->
#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;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="playIcon"></button>
</body>
</html>
英文:
I'm trying to make a button for a player (check video)
It works but to make the button seem "pressed" I have to change its background-image on click, however this seems to override the transtion that was already present. The part responsible for rotation still works, unlike image swapping.
Not changing the image on pause/changing it to the initial image does nothing.
I think the solution might be just to use @keyframes and do it all manually but I feel like there's a cleaner solution.
Here's a demo: (I need to make so when it's clicked twice the light-blue square still transitions back to orange)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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)
});
<!-- language: lang-css -->
#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;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="playIcon"></button>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
我检查了双击功能，并在悬停选择器中移除背景图像，根据我理解你的问题。请检查并告诉我如果这对你没有帮助。
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>
英文:
I checked double click functionality and remove background image in hover selector here as my understanding of your question Please check and let me know if this is not helpful for you.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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)
});
<!-- language: lang-css -->
#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;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="playIcon"></button>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论