gpt4 book ai didi

javascript - 如何在 css 中使用@keyframes 交叉淡入淡出图像库?

转载 作者:行者123 更新时间:2023-11-28 14:03:16 26 4
gpt4 key购买 nike

我有一个 fiddle (Fiddle A),其中 2 个图像(2 个图 block )的图像库交叉淡入淡出。这是我使用过的 html/css 片段。

<div class="featured-block" style="display:flex; justify-content: center;">
<a href="https://www.google.com/" class="featured-block__item cf">
<div class="featured-block__item-inner">
<figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
<img class="default-opacity" src="https://i.imgur.com/EUqZ1Er.png" data-fallback-img="https://i.imgur.com/EUqZ1Er.png" alt="Outburst">
</figure>
</div>
</a>
</div>

这是我为上述 html 使用了 2 个图像(2 个图 block )的 @keyframes:

@keyframes cf4FadeInOut {
0% {
opacity: 0;
}
20% {
opacity: 1;
z-index: 999;
}
33% {
opacity: 1;
}
53% {
opacity: 0;
z-index: 1;
}
100% {
opacity: 0;
}
}

Fiddle A 中的上述 css 动画在有 2 个图 block (2 个图像).

问题陈述:

上面的 fiddle (Fiddle A) 对于 2 张图像来说工作得很好。我想要相同的css-animation/cross-fade gallery of images 当有3 和4 图像 时发生。

这是 4 张图像(4 个图 block )的 fiddle https://jsfiddle.net/zwjt8qko/1/embedded/result ( fiddle B)

这是 3 张图像(3 个图 block )的 fiddle https://jsfiddle.net/f6gr7kL1/embedded/result ( fiddle C)

我想知道我应该在上面的 Fiddle B(4 张图片)和 Fiddle C(3 张图片) 中的关键帧进行哪些更改,以便相同的 css-animation/cross- fade 发生在 Fiddle A 中。

我也对 JavaScript 解决方案持开放态度。

最佳答案

JavaScript 方法

基本方法:

  1. 在您的 CSS 中,所有图片都默认为 opacity: 0
  2. 在您的 HTML 中,为其中一张图片设置一个类名,将图片的不透明度更改为 1
  3. 在 JavaScript 中,在整个图片中定期切换该类。
  4. 甚至不用担心关键帧,直接在 JavaScript 中进行延迟即可。这使您可以更轻松地修改您希望脉冲动画的不同部分持续多长时间,而不必像处理关键帧那样计算总 animation-duration 的百分比。

const pics = document.querySelectorAll('.pic');
const lastPic = pics.length - 1;
const transitionDuration = 800; // matches CSS
const transitionDelay = 3000; // up to you
const totalDelay = transitionDuration + transitionDelay;
const intervalDelay = (transitionDuration * 2) + transitionDelay; // time to fade out + time to fade in + time to stay active

function toggleClass() {
const activePic = document.querySelector('.pic.active');
const activeIndex = Array.prototype.indexOf.call(pics, activePic);
const nextIndex = activeIndex === lastPic ? 0 : activeIndex + 1;
const nextPic = pics[nextIndex];

setTimeout(() => activePic.classList.remove('active'), transitionDelay);
setTimeout(() => nextPic.classList.add('active'), totalDelay);
}

setInterval(toggleClass, intervalDelay);
.wrapper {
width: 400px;
height: 300px;
position: relative;
}
.pic {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 800ms ease; /* immediately start fading out when active class is lost */
}
.pic.active {
opacity: 1;
}
<div class="wrapper">
<img class="pic active" src="https://via.placeholder.com/400x300?text=picture%201" alt="">
<img class="pic" src="https://via.placeholder.com/400x300?text=picture%202" alt="">
<img class="pic" src="https://via.placeholder.com/400x300?text=picture%203" alt="">
<img class="pic" src="https://via.placeholder.com/400x300?text=picture%204" alt="">
</div>

关键帧方法

我不会在这里详细介绍,但它可能看起来像这样:

@keyframes pulse1 {
0% {
opacity: 1;
}
20% {
opacity: 0;
}
}

@keyframes pulse2 {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
45% {
opacity: 0;
}
}

@keyframes pulse3 {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
70% {
opacity: 0;
}
}

@keyframes pulse4 {
0% {
opacity: 0;
}
75% {
opacity: 1;
}
}

请注意,我们甚至不切换 z-index,因为没有意义:一次只有其中一个可见。从一开始就将它们全部放在彼此之上,它们的 z-index 将无关紧要。

(我认为您问题中的动画的 z-index 部分甚至没有做任何事情,因为 z-index 不可设置动画。)

关于javascript - 如何在 css 中使用@keyframes 交叉淡入淡出图像库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57481429/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com