一段css解决幻灯片切换时烦人费时的过渡动画

经验分享
1 
/*
 * === 彻底禁用 Reveal.js 幻灯片切换动画 ===
 * 目标：实现瞬间切换，如同静态画面
 */

/* 
 * 1. 强制移除所有可能存在的过渡效果。
 *    - transition: none; 移除所有 CSS transition。
 *    - animation: none; 移除所有 CSS animation。
 */
.reveal .slides section.present,
.reveal .slides section.past,
.reveal .slides section.future {
    transition: none !important;
    animation: none !important;
    
    /* 
     * 禁用 transform 相关的动画。
     * Reveal.js 经常用 transform 来实现滑动效果。
     * 强制将其重置为默认值，可以阻止很多滑入/滑出的动画。
     */
    transform: none !important; 
}

/* 
 * 2. 确保即使在特定状态下，也没有动画。
 *    Reveal.js 在切换时，可能会给幻灯片添加 .visible, .present, .past, .future 等类。
 *    我们希望在任何状态下都禁用动画。
 */
.reveal .slides section {
    transition: none !important;
    animation: none !important;
}

/* 
 * 3. 阻止 Reveal.js 默认的“滑入/滑出”动画，即使 animation/transition 被清除了。
 *    这部分可能需要根据 Reveal.js 的具体版本和主题来实现。
 *    有时，动画是直接在 .slides 容器上实现的。
 */
.reveal .slides {
    transition: none !important;
    animation: none !important;
}

/* 
 * 4. 尝试重置 Reveal.js 默认的插件（如滑块）可能引入的动画。
 *    如果你的幻灯片有插件（如目录、缩略图等），它们也可能带来动画。
 *    这需要更具体地查看 Reveal.js 的 CSS。
 */

/* 
 * 5. 强制移除淡入淡出效果
 */
.reveal .slide-transition {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important; /* 确保不透明 */
}