کتاب صوتی انیمیشن‌های Vue.js: Transition Component و Third-Party Libraries

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره انیمیشن‌های Vue.js: Transition Component و Third-Party Libraries

موضوع کلی: برنامه نویسی

موضوع میانی: انیمیشن‌های وب (Web Animations)

📋 سرفصل‌های دوره

• 1. خوش‌آمدگویی و معرفی دوره
• 2. انیمیشن در وب چیست و چرا اهمیت دارد؟
• 3. مروری بر HTML و CSS لازم برای انیمیشن
• 4. مفاهیم کلیدی جاوا اسکریپت برای انیمیشن (Event Handling, DOM)
• 5. معرفی ابزارهای توسعه‌دهنده مرورگر برای دیباگ انیمیشن‌ها
• 6. آشنایی با CSS Transitions
• 7. کنترل سرعت و تأخیر با `transition-timing-function` و `transition-delay`
• 8. آشنایی با CSS Transforms (Translate, Scale, Rotate, Skew)
• 9. انیمیشن‌های پیچیده‌تر با CSS Keyframes و @keyframes
• 10. ویژگی `animation` و خصوصیات زیرمجموعه آن
• 11. کنترل جهت و تکرار انیمیشن (`animation-direction`, `animation-iteration-count`)
• 12. بهینه‌سازی عملکرد انیمیشن‌های CSS (استفاده از `transform` و `opacity`)
• 13. مفهوم `will-change` برای بهبود پرفورمنس
• 14. انیمیشن‌های مبتنی بر وضعیت (State-based) با کلاس‌های CSS
• 15. مقدمه‌ای بر کتابخانه‌های کمکی CSS مانند Animate.css
• 16. نصب و راه‌اندازی یک پروژه Vue 3
• 17. مفاهیم اساسی Vue: کامپوننت‌ها، پراپ‌ها و ایونت‌ها
• 18. دایرکتیوهای شرطی: `v-if`, `v-else`, `v-show`
• 19. رندر کردن لیست‌ها با `v-for`
• 20. مدیریت وضعیت (State) با `ref` و `reactive`
• 21. هوک‌های چرخه حیات (Lifecycle Hooks) در Vue
• 22. معرفی کامپوننت `<transition>`
• 23. انیمیشن‌های ورود (Entering) و خروج (Leaving)
• 24. کلاس‌های CSS تولید شده توسط `<transition>` (v-enter-from, v-enter-active, etc.)
• 25. ایجاد یک انیمیشن Fade ساده با `<transition>`
• 26. ایجاد یک انیمیشن Slide با `<transition>`
• 27. ترکیب انیمیشن‌ها (Fade و Slide)
• 28. استفاده از انیمیشن‌های CSS سفارشی با `name` prop
• 29. استفاده از کتابخانه‌های CSS (مانند Animate.css) با `<transition>`
• 30. کنترل زمان‌بندی انیمیشن با `duration` prop
• 31. انیمیشن در زمان بارگذاری اولیه کامپوننت با `appear`
• 32. کلاس‌های سفارشی برای انیمیشن با `enter-from-class`, `leave-to-class` و ...
• 33. مفهوم `type` prop برای تعیین پایان انیمیشن
• 34. انیمیشن بین دو عنصر با `v-if`/`v-else`
• 35. حالت‌های انیمیشن: `in-out` و `out-in`
• 36. مقدمه‌ای بر هوک‌های جاوا اسکریپت در `<transition>`
• 37. استفاده از هوک‌های `before-enter` و `enter`
• 38. تکمیل انیمیشن با هوک `after-enter` و `enter-cancelled`
• 39. استفاده از هوک‌های خروج (`before-leave`, `leave`, `after-leave`)
• 40. ترکیب هوک‌های جاوا اسکریپت و کلاس‌های CSS
• 41. چه زمانی از هوک‌های جاوا اسکریپت به جای CSS استفاده کنیم؟
• 42. انیمیشن بین کامپوننت‌های داینامیک با `key` attribute
• 43. معرفی کامپوننت `<transition-group>` برای لیست‌ها
• 44. تفاوت‌های کلیدی بین `<transition>` و `<transition-group>`
• 45. انیمیشن افزودن و حذف آیتم‌ها از یک لیست (`v-for`)
• 46. ایجاد انیمیشن Fade برای آیتم‌های لیست
• 47. کلاس `v-move` و کاربرد آن در انیمیشن جابجایی
• 48. سفارشی‌سازی انیمیشن `move` با `move-class`
• 49. تکنیک Staggering (انیمیشن با تأخیر متوالی) برای لیست‌ها
• 50. پیاده‌سازی Staggering با CSS
• 51. پیاده‌سازی Staggering با هوک‌های جاوا اسکریپت
• 52. کنترل تگ رندر شده توسط `<transition-group>` با `tag` prop
• 53. انیمیشن لیست‌های شبکه‌ای (Grid Layouts)
• 54. مدیریت `key` attribute برای انیمیشن‌های صحیح در لیست
• 55. مثال عملی: ساخت یک لیست To-Do با انیمیشن‌ها
• 56. چالش‌های پرفورمنس در لیست‌های بزرگ و راه‌حل‌ها
• 57. چرا از کتابخانه‌های جاوا اسکریپتی مانند GSAP استفاده کنیم؟
• 58. نصب و راه‌اندازی GSAP در پروژه Vue
• 59. مفهوم Tween و ایجاد اولین انیمیشن با `gsap.to()`
• 60. استفاده از GSAP در هوک‌های جاوا اسکریپت `<transition>`
• 61. کنترل پیشرفته انیمیشن با Timeline در GSAP
• 62. ایجاد انیمیشن‌های Staggered با GSAP
• 63. انیمیشن ویژگی‌های SVG با GSAP
• 64. مفهوم Easing در GSAP و انواع آن
• 65. کنترل انیمیشن‌های GSAP (Play, Pause, Reverse)
• 66. ترکیب Vue Reactivity با انیمیشن‌های GSAP
• 67. انیمیشن مبتنی بر اسکرول با ScrollTrigger و Vue
• 68. پلاگین‌های مفید GSAP (مانند Flip, Draggable)
• 69. نکات پرفورمنس هنگام استفاده از GSAP در Vue
• 70. معرفی Anime.js به عنوان یک جایگزین سبک
• 71. نصب و راه‌اندازی Anime.js در پروژه Vue
• 72. ساخت انیمیشن‌های پایه با Anime.js
• 73. ادغام Anime.js با هوک‌های `<transition>`
• 74. استفاده از Timeline در Anime.js
• 75. ویژگی‌های خاص Anime.js مانند Easing Functions
• 76. مقایسه Anime.js و GSAP: چه زمانی از کدام استفاده کنیم؟
• 77. Lottie چیست و چگونه کار می‌کند؟ (انیمیشن‌های مبتنی بر JSON)
• 78. ادغام Lottie در یک پروژه Vue با `vue-lottie`
• 79. کنترل پخش انیمیشن‌های Lottie (Play, Pause, Speed)
• 80. انیمیشن‌های تعاملی Lottie بر اساس رویدادهای کاربر
• 81. معرفی VueUse و تابع `useTransition`
• 82. ایجاد انیمیشن‌های تعاملی با `vue-kinesis` (Parallax)
• 83. انیمیشن‌های مبتنی بر فیزیک با کتابخانه‌هایی مانند Popmotion
• 84. انیمیشن بین صفحات (Route Transitions) با Vue Router
• 85. پیاده‌سازی انیمیشن‌های سفارشی برای ورود و خروج Route
• 86. الگوهای طراحی برای انیمیشن‌های قابل استفاده مجدد
• 87. بهینه‌سازی پرفورمنس انیمیشن‌ها: GPU Acceleration
• 88. استفاده از `requestAnimationFrame` برای انیمیشن‌های روان
• 89. دسترسی‌پذیری (Accessibility) در انیمیشن‌ها: `prefers-reduced-motion`
• 90. تست کردن انیمیشن‌ها در Vue
• 91. پروژه اول: ساخت یک لندینگ پیج انیمیت شده با Vue و GSAP
• 92. پروژه دوم: ساخت یک گالری تصاویر انیمیت شده
• 93. پروژه سوم: انیمیشن نمودارهای داده (Data Visualization)
• 94. پروژه چهارم: ساخت یک منوی ناوبری خلاقانه و انیمیت شده
• 95. مرور مفاهیم کلیدی دوره
• 96. بهترین شیوه‌ها (Best Practices) در انیمیشن‌های وب
• 97. معرفی منابع بیشتر برای یادگیری
• 98. روندهای آینده در انیمیشن‌های وب
• 99. جمع‌بندی نهایی و خداحافظی
• 100. **بررسی عملکرد انیمیشن‌ها و بهینه‌سازی آن‌ها در Vue.js**