أضف تأثيرًا رائعًا عند الانتقال من الوضع الفاتح إلى الوضع الداكن باستخدام CSS وعرض التحولات

منقول من @jhey على تويتر

[!ملحوظة]
يفترض هذا أن لديك بالفعل إعدادًا لوضع الضوء الداكن مع نوع من الوظائف لتحديث المظهر الخاص بك

1. أضف ملف CSS

  /* Angled */
  [data-style='angled']::view-transition-old(root) {
    animation: none;
    z-index: -1;
  }

  [data-style='angled']::view-transition-new(root) {
    animation: unclip 1s;
    clip-path: polygon(-100vmax 100%, 100% 100%, 100% -100vmax);
  }

  @keyframes unclip {
    0% {
      clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
    }
  }

1. تأكد من تعيين سمة data-style = "angled" على العنصر الجذر في رد فعل SPA نستخدم خطاف useEffect

  useEffect(() => {
    // set the data-style attribute
    document.documentElement.dataset.style = "angled";
  }, []);

في SSR يمكن ضبطه مباشرة في علامة html

1. قم بلف وظيفة تغيير المظهر في documnet.startViewTransition لبدء انتقال العرض

  function transitionColors() {
    if (typeof window !== "undefined") {
      document.startViewTransition(() => {
        const newTheme = theme  === "light" ? "dark" : "light";
        document.documentElement.dataset.theme = newTheme;
        updateTheme(newTheme);
      });
    }
  }

يمكن إضافة المزيد من أنماط الانتقال عن طريق تضمين ملف CSS المقابل وإضافة سمة نمط البيانات الصحيحة

      
          (document.documentElement.dataset.style = e.target.value)
        }
      >
        Default
        Vertical
        Wipe
        Angled
        Flip
        Slides
      

مثال للرد

إذا كنت تحب هذا النوع من حيل CSS، ففكر في اتباع jhey