基于CSS类的条件样式：遍历同class图片为高度不足项添加动画类

原实现存在两个关键逻辑缺陷：

• 调用document.querySelector仅能获取DOM中第一个匹配的.animated img元素，后续高度判断全部基于这一个元素的数值，不具备全量元素的判断能力
• 条件判断触发后直接对全局匹配的所有元素批量执行addClass操作，未做到单元素的差异化处理，最终导致类名添加完全不符合预期

要实现逐元素的条件判断逻辑，需要调整两个核心环节：

• 将单元素查询替换为全量元素遍历，逐节点计算自身高度与阈值的对比结果
• 把类名添加的操作放到遍历循环内部，仅对当前满足高度条件的单个元素添加类名，不做批量操作
• 调整触发时机，等图片资源完全加载完成后再计算高度，避免因图片未加载导致高度计算为0的偏差

// 等窗口所有资源（含图片）加载完成后再执行判断
$(window).on('load', function(){
    // 遍历所有匹配的作品集图片元素
    $('.animated img').each(function(){
        const $currentImg = $(this);
        // 获取当前图片所属容器的高度
        const containerTotalHeight = $currentImg.closest('.animated').height();
        // 获取当前单张图片的实际渲染高度
        const currentImgRenderHeight = $currentImg.height();
        // 按需求判断：图片高度不足容器高度70%时触发动画类
        if (currentImgRenderHeight < containerTotalHeight * 0.7) {
            $currentImg.addClass('animated-image');
        }
    })
})

原CSS逻辑无需大改，仅需调整动画关键帧的定位逻辑，避免图片添加绝对定位后失去垂直居中效果：

@keyframes bounce {
    0%, 45%, 95%, 100% {
        left: 0;
        /* 整合垂直居中的偏移量到动画关键帧中，避免样式被覆盖 */
        transform: translate(0, -50%);
    }
    45%, 55% {
        left: 100%;
        transform: translate(-100%, -50%);
    }
}
/* 补充动画类的垂直居中定位 */
.animated-image {
    position: absolute;
    top: 50%;
    /* 原有其他样式保留 */
}

• 如果站点使用了图片懒加载功能，需要在每张懒加载图片的加载完成回调中重新执行上述判断逻辑，避免懒加载图片因初始高度为0导致判断失准
• 可以根据实际视觉效果调整阈值系数（当前为0.7，即容器高度的70%），匹配不同的设计要求

内容的提问来源于stack exchange，提问作者Hielke