动画反馈
动画反馈能够增强用户操作的感知，提供流畅自然的交互体验。
动画类型
CSS过渡
transition实现属性变化的平滑过渡
CSS动画
animation实现复杂的动画序列
JavaScript动画
requestAnimationFrame实现高性能动画
第三方库
GSAP、Framer Motion等专业动画库
动画应用场景
| 场景 | 动画效果 | 用户体验 |
|---|---|---|
| 按钮点击 | 缩放、颜色变化、阴影效果 | 确认点击操作 |
| 页面切换 | 淡入淡出、滑动、翻转效果 | 平滑过渡体验 |
| 加载状态 | 旋转、脉冲、骨架屏 | 缓解等待焦虑 |
| 错误提示 | 抖动、渐现、滑入效果 | 吸引注意，强调重要信息 |
动画实现方式
原生JavaScript
结合CSS类和JavaScript控制动画
// CSS:
.fade-enter {
opacity: 0;
transform: translateY(-10px);
}
.fade-enter-active {
transition: all 0.3s ease;
}
.fade-exit {
opacity: 1;
transform: translateY(0);
}
.fade-exit-active {
transition: all 0.3s ease;
}
// JavaScript:
function animateElement(element, animationClass) {
element.classList.add(animationClass);
const animationEndHandler = function() {
element.classList.remove(animationClass);
element.removeEventListener('animationend', animationEndHandler);
};
element.addEventListener('animationend', animationEndHandler);
}
// 按钮点击动画
const button = document.querySelector('#animated-button');
button.addEventListener('click', function() {
this.classList.add('button-click-animation');
setTimeout(() => {
this.classList.remove('button-click-animation');
}, 300);
});
Vue.js实现
使用Vue的过渡系统，简化动画处理
<!-- Vue模板 -->
<template>
<div>
<!-- 按钮点击动画 -->
<button @click="animateButton" :class="{ 'animate': isAnimating }">
点击我
</button>
<!-- 元素过渡 -->
<transition name="fade">
<div v-if="showElement" class="animated-element">
我会淡入淡出
</div>
</transition>
<!-- 列表动画 -->
<transition-group name="list" tag="ul" class="list-container">
<li v-for="item in items" :key="item.id" class="list-item">
{{ item.text }}
</li>
</transition-group>
</div>
</template>
<script>
export default {
data() {
return {
isAnimating: false,
showElement: true,
items: [
{ id: 1, text: '项目1' },
{ id: 2, text: '项目2' },
{ id: 3, text: '项目3' }
]
}
},
methods: {
animateButton() {
this.isAnimating = true;
setTimeout(() => {
this.isAnimating = false;
}, 300);
}
}
}
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 0.5s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>