javascript - 显示时如何将动画应用于元素?
问题描述
我使用 div 来包含 3 组图像。我有一个后退和下一个按钮,用户可以使用它们在图像之间导航。
我的 HTML:
<div class="imgs">
<button>Back</button>
<div class="conatiner">
<div class="img-holder-1">
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
</div>
<div class="img-holder-1">
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
</div>
<div class="img-holder-1">
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
</div>
</div>
<button>Next</button>
</div>
我的 CSS:
.imgs{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.container > div {
display: none;
}
.container > .displayed{
display: grid;
grid-auto-columns: 1fr 1fr 1fr;
}
.container > .displayed > img{
width: 40px;
height: 40px;
border: 2px solid red;
}
它的工作方式是我有一些 JavaScript 将 .displayed 类广告到显示的图像集。我想实现这一点,当类更改发生时,其中一个 div 淡出,另一个淡入,因此它会更加平滑。有没有办法用 CSS 动画做到这一点?或者我应该如何达到这个结果?
解决方案
您应该尝试使用带有@keyframes的动画, 因为每次元素从隐藏到显示时都会根据需要制作动画。
试试这个:
const images = document.querySelector(".container > .img-holder-1 ");
document.querySelector("#back").addEventListener('click', function() { images.classList.toggle('displayed'); });
.imgs{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.container > div {
display: none;
}
.container > .displayed{
display: grid;
grid-auto-columns: 1fr 1fr 1fr;
opacity:0;
animation:fade-in 1s forwards;
}
.container > .displayed > img{
width: 40px;
height: 40px;
border: 2px solid red;
}
@keyframes fade-in{
from{
opacity: 0;
}
to{
opacity:1;
}
}
<div class="imgs">
<button id="back">Toggle Class</button>
<div class="container">
<div class="img-holder-1 displayed">
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
</div>
<div class="img-holder-1">
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
</div>
<div class="img-holder-1">
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
<img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
</div>
</div>
</div>
点击“Toggle Class”查看淡入效果。
推荐阅读
- ios - 仅发送数据块(通过 CoreBlueTooth)
- javascript - 未定义的对象,使用 NodeJS 和 Mongoose 从 MongoDB 获取模式较少的数据
- c# - 如何在 C# 中同时进行通话后和渲染屏幕
- java - 如何更改 UIManager.getIcon("OptionPane.errorIcon) 的图标大小?
- r - 如何在r中将数值转换为二进制(使用阈值)?
- css - 滚动未显示具有百分比宽度的元素
- ios - 当我从领域中删除对象时,tableview 如何隐式重新加载?
- sql - SQL 唯一约束允许违反空值
- javascript - 如何在浏览器上创建链接以下载服务器文件?
- java - JPA选择日期低于参数的实体