本文探讨了当元素初始隐藏时，css动画无法按预期播放的常见问题。核心原因在于动画在页面加载时即已执行完毕。教程提供了一种通过javascript动态添加css类来触发动画的解决方案，确保动画在元素可见时才开始播放，并讨论了动画重复播放的处理方法。
理解问题：为什么CSS动画不按预期播放？
在前端开发中，我们经常需要创建动态效果来提升用户体验，其中CSS动画是实现这一目标的重要工具。然而，一个常见的困扰是，当一个元素最初被设置为不可见（例如通过 visibility: hidden 或 display: none）时，为其定义的CSS动画似乎没有在它变为可见时播放。
问题的根源在于浏览器处理CSS动画的机制。当浏览器解析HTML和CSS时，它会立即计算并应用所有元素的样式，包括动画属性。如果一个元素在DOM加载时就已经定义了 animation 属性，那么这个动画就会立即开始执行，无论该元素当前是否可见。这意味着，如果您的元素最初是隐藏的，动画可能在您有机会使其可见之前就已经完成，或者至少已经进行了一部分。当您随后通过JavaScript将元素的 visibility 设置为 visible 时，您看到的只是动画已经结束（或处于某个中间状态）的最终结果，而不是完整的动画过程。
解决方案：动态触发CSS动画
为了解决这个问题，我们需要确保动画只在元素需要显示时才被应用。最佳实践是利用JavaScript动态地添加或移除一个CSS类，该类包含了动画属性。
1. 准备HTML结构
首先，我们需要一个触发动画的按钮和一个初始隐藏的元素。
立即学习“前端免费学习笔记（深入）”；
<button id="openNotification"> 打开通知 </button> <!-- 通知框，初始设置为隐藏 --> <div id="notification" style="visibility: hidden;"> 这是一个通知！ </div>
2. 定义CSS样式
接下来，我们定义通知框的基础样式和动画关键帧。关键在于，不要在初始状态的 #notification 规则中直接添加 animation 属性。
#notification {
position: fixed;
z-index: 101;
bottom: 0;
/* 初始位置：完全超出屏幕底部，额外10px作为间距 */
transform: translateY(calc(100% + 10px));
left: 10vw;
right: 10vw;
text-align: center;
height: 20vh;
overflow: hidden;
background-color: #ededed;
color: #000;
/* 添加过渡效果，使visibility的切换更平滑，但这里主要针对transform */
transition: transform 0s; /* 确保transform不会因其他原因产生过渡 */
}
/* 定义动画关键帧：从屏幕外滑入到屏幕内 */
@keyframes slideUp {
0% { transform: translateY(calc(100% + 10px)); }
100% { transform: translateY(0); }
}
/* 定义一个专门用于触发动画的类 */
#notification.slide {
animation: slideUp 2.5s ease forwards;
}在上面的CSS中，#notification 定义了元素的初始状态和外观，但没有指定任何动画。@keyframes slideUp 定义了动画的轨迹。而 animation 属性被放置在一个新的CSS类 #notification.slide 中。这意味着只有当 #notification 元素同时拥有 slide 类时，动画才会生效。
3. 使用JavaScript动态添加动画类
最后，我们使用JavaScript来监听按钮点击事件，并在点击时执行以下操作：
- 将通知框的 visibility 设置为 visible。
- 为通知框添加 slide 类，从而触发动画。
var feedbackButton = document.getElementById('openNotification');
feedbackButton.addEventListener('click', function (){
var notificationElement = document.getElementById("notification");
// 1. 先将元素设置为可见
notificationElement.style.visibility = "visible";
// 2. 稍作延迟或强制重绘，确保浏览器识别到visibility变化，然后添加动画类
// 强制重绘可以通过访问offsetWidth等属性实现，但现代浏览器通常足够快
// 也可以使用 setTimeout(..., 0) 确保在下一帧执行
notificationElement.classList.add('slide');
});通过这种方式，当用户点击按钮时，通知框才变为可见，并且动画类被添加到元素上，浏览器会重新计算样式并播放动画，从而实现预期的滑动效果。
进阶考虑与注意事项
1. 动画的重复播放
上述解决方案只允许动画播放一次。如果用户关闭通知后再次点击按钮，动画将不会重新播放，因为 slide 类已经存在。要实现动画的重复播放，您需要在动画结束后移除 slide 类。这可以通过监听 animationend 事件来完成：
var feedbackButton = document.getElementById('openNotification');
var notificationElement = document.getElementById("notification");
feedbackButton.addEventListener('click', function (){
// 如果动画类已存在，先移除以确保动画能重播
notificationElement.classList.remove('slide');
// 强制浏览器重绘，确保移除类后动画状态被重置
void notificationElement.offsetWidth; // 触发回流
notificationElement.style.visibility = "visible";
notificationElement.classList.add('slide');
});
// 监听动画结束事件
notificationElement.addEventListener('animationend', function() {
// 动画结束后，可以根据需要移除动画类，或者将元素再次隐藏
// notificationElement.classList.remove('slide');
// notificationElement.style.visibility = "hidden"; // 如果需要自动隐藏
});通过 void notificationElement.offsetWidth; 这一行代码，我们强制浏览器进行一次回流（reflow），确保在添加 slide 类之前，浏览器已经完全处理了 slide 类的移除操作，从而允许动画重新开始。
2. visibility: hidden 与 display: none
- visibility: hidden: 元素仍然占据其在文档流中的空间，只是不可见。这对于动画来说通常是更好的选择，因为元素始终存在于布局中，其几何属性（如 transform）可以被动画化。
- display: none: 元素会从文档流中完全移除，不占据任何空间。当 display 属性从 none 变为其他值时，浏览器通常不会触发动画，因为元素是“突然出现”的。因此，对于需要动画效果的元素，推荐使用 visibility: hidden 配合 opacity 或 transform 来控制可见性。
总结
要确保CSS动画在元素可见时才按预期播放，关键在于避免在元素初始加载时就应用 animation 属性。通过将动画属性封装在一个独立的CSS类中，并使用JavaScript在需要时动态地添加该类，我们可以精确控制动画的触发时机。同时，对于需要重复播放的动画，监听 animationend 事件并适时移除动画类是实现这一功能的有效方法。这种方法不仅解决了动画播放时机的问题，也使得动画逻辑更加清晰和易于管理。
