英文:
How to make an image change to another one with a transition effect using vanilla Javascript?
问题
在我正在创建的网站上，我有一些手风琴，每个手风琴的顶部都有一张图片。当你打开手风琴时，里面有一个描述，并且图片切换到另一张。然后当你关闭手风琴时，图片切换回第一张。
问题是，我希望这个图片切换具有平滑的过渡效果，带有淡入淡出效果，但现在只是突然切换。我该如何做呢？
假设手风琴按钮的id为"button"；包含第一张图片（将切换到第二张图片）的标签的id为"firstimage"。
这是JavaScript中的代码：
let counter = 1;
let button = document.querySelector("#button");
button.addEventListener("click", function () {
let image = document.querySelector("#firstimage");
image.setAttribute(
"src",
"(第一张图片的URL)"
);
counter++;
if (counter > 2) {
counter = 1;
image.setAttribute(
"src",
"(第二张图片的URL)"
);
}
});
也许这是我应该在CSS中编辑的内容？我已经尝试在CSS中为第一张图片添加过渡效果（transition: all 360ms ease-in-out），但没有效果。
英文:
on a website I'm creating I have some accordions, and each of them has an image at the top. When you open the accordion, there's a description inside, and the image changes to another one. Then when you close the accordion, the image switches back to the first one.
The problem is that I'd like this image change to have a smooth transition, with a fade effect, and right now it's just an abrupt change. How can I do it?
Let's say that the accordion button has an id of "button"; and the <img> tag that contains the first image (which will change to the second image) has an id of "firstimage".
This is the code in Javascript:
let counter = 1;
let button = document.querySelector("#button");
button.addEventListener("click", function () {
let image = document.querySelector("#firstimage");
image.setAttribute(
"src",
"(url of the first image)"
);
counter++;
if (counter > 2) {
counter = 1;
image.setAttribute(
"src",
"(url of the second image)"
);
}
});
Maybe this is something I should edit in the CSS? I already tried adding a transition to the first image in CSS ( transition: all 360ms ease-in-out ) but it didn't work.
答案1
得分: 2
你只需将两张图像叠放在一起并设置不透明度。
<div class="wrapper">
<img src="http://placekitten.com/200/300" />
<img src="http://placekitten.com/g/200/300" />
</div>
.wrapper {
position: relative;
display: inline-block;
}
.wrapper > img + img {
position: absolute;
left: 0;
opacity: 0;
transition: opacity 2s ease-in-out;
}
.wrapper.active > img + img {
opacity: 1;
transition: opacity 2s ease-in-out;
}
document.querySelector('.wrapper').addEventListener("click", function (e) {
e.currentTarget.classList.toggle("active");
});
英文:
You can just put two images on top of one another and set the opacity.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.querySelector('.wrapper').addEventListener("click", function (e) {
e.currentTarget.classList.toggle("active");
});
<!-- language: lang-css -->
.wrapper {
position: relative;
display: inline-block;
}
.wrapper > img + img {
position: absolute;
left:0;
opacity: 0;
transition: opacity 2s ease-in-out;
}
.wrapper.active > img + img {
opacity: 1;
transition: opacity 2s ease-in-out;
}
<!-- language: lang-html -->
<div class="wrapper">
<img src="http://placekitten.com/200/300" />
<img src="http://placekitten.com/g/200/300" />
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论