درحال ایجاد پویانمایی متناوب

پویانمایی‌های متناوب جلوه جالبی ایجاد می‌کنند که در آن چندین عنصر مرتب‌شده به‌صورت متوالی با تأخیر کمی بین هرکدام پویانمایی می‌شوند، به‌جای اینکه همه به‌طور هم‌زمان پویانمایی شوند. این تکنیک اغلب در فهرست‌ها، گالری‌ها، یا منوهای پیمایش استفاده می‌شود تا چشم کاربر را هدایت کند و حس ریتمیک و صیقلی به تعاملات اضافه کند.

پویانمایی‌های متناوب با sibling-index()

از خصوصیت sibling-index() در خصوصیت animation-delay استفاده کنید تا پویانمایی هر عنصر با عددی متناسب با موقعیت آن در عنصر ولی جابه‌جا شود. تابع sibling-index() یک عدد صحیح برمی‌گرداند، بنابراین باید در یک واحد زمانی ضرب شود تا به زمان تبدیل شود.

#stagger-list > .item {
  --stagger-time: 0.1s;
  /* Define the animation first */
  animation: fade-in 0.4s;
  /* Set the `animation-delay` to a time multiplied by the `sibling-index()` */
  animation-delay: calc(sibling-index() * var(--stagger-time))
}

الزامی: با غیرفعال کردن پویانمایی برای کاربرانی که کاهش حرکت را ترجیح می‌دهند، به اولویت‌های کاربر احترام بگذارید.

@media (prefers-reduced-motion: reduce){
  /* Disable animation for users who prefer reduced motion. */
  #stagger-list > .item {
    animation: none;
  }
}

راهبردهای جایگزین

پشتیبانی از sibling-index() را بااستفاده از CSS با @supports (animation-delay: calc(sibling-index() * 0.1s)){} یا JavaScript با !CSS.supports('animation-delay: calc(sibling-index() * 0.1s)') آزمایش کنید.

برای پشتیبانی از پویانمایی‌های متناوب در مرورگرهای قدیمی‌تر، از جاوا اسکریپت برای افزودن ویژگی سفارشی --sibling-index به هر عنصر هم‌نیا استفاده کنید. MANDATORY: wrap this in a CSS.supports('animation-delay: calc(sibling-index() * 0.1s)') test to avoid running unneeded JavaScript.

if(!CSS.supports('animation-delay: calc(sibling-index() * 0.1s)')){
  const staggerList = document.getElementById('stagger-list');
  [...staggerList.children].forEach((el, index)=>el.style.setProperty('--sibling-index', index + 1));
}

یک اعلان animation-delay اضافه کنید که از دارایی سفارشی --sibling-index استفاده می‌کند. باید قبل‌از تعریف animation-delay باشد که از تابع sibling-index() استفاده می‌کند. نیازی نیست این مورد در @supports قرار داده شود - مرورگرهای قدیمی‌تر تعریف دوم را تجزیه نخواهند کرد و از تعریف اول استفاده خواهند کرد.

#stagger-list > .item {
  animation-delay: calc(var(--sibling-index) * var(--stagger-time));
  animation-delay: calc(sibling-index() * var(--stagger-time));
}