如何为HTML表格添加动画效果？CSS怎么实现？

    

        

            
姓名
            
年龄
            
城市
        
    
    

        

            
张三
            
30
            
北京
        
        

            
李四
            
25
            
上海
        
        

            
王五
            
35
            
广州
        
    

/* CSS */
@keyframes fadeOutSlideUp {
    from {
        opacity: 1;
        transform: translateY(0);
        max-height: 50px; /* 假设行高最大值 */
        padding-top: 12px;
        padding-bottom: 12px;
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
        max-height: 0; /* 收缩高度 */
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden; /* 隐藏内容溢出 */
    }
}
.fade-out-row {
    animation: fadeOutSlideUp 0.6s ease-out forwards; /* forwards让动画停留在最后一帧 */
}

// JavaScript (简化示例)
function deleteRowWithAnimation(rowElement) {
    rowElement.classList.add('fade-out-row'); // 添加动画类

    // 监听动画结束事件，动画结束后移除元素
    rowElement.addEventListener('animationend', () => {
        rowElement.remove();
    }, { once: true }); // { once: true } 确保事件只触发一次
}

// 假设你有一个删除按钮，点击时调用这个函数
// const deleteButton = document.getElementById('some-delete-button');
// deleteButton.addEventListener('click', () => {
//     const targetRow = document.getElementById('row-to-delete');
//     if (targetRow) {
//         deleteRowWithAnimation(targetRow);
//     }
// });

@media (prefers-reduced-motion: reduce) {
    /* 在用户偏好减少动态效果时，禁用或简化动画 */
    tr, td, .new-row-animation, .highlight-cell {
        transition: none !important; /* 禁用所有过渡 */
        animation: none !important; /* 禁用所有动画 */
    }
    /* 或者只保留最基本的视觉提示 */
    tr:hover {
        background-color: #e0f7fa; /* 仅改变背景色，不缩放 */
        transform: none;
        box-shadow: none;
    }
}