查看过渡主题动画

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《查看过渡主题动画》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

使用 css 和视图转换从浅色模式转换为深色模式时添加炫酷效果

复制自 twitter 上的@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 react 中我们使用 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 文件并添加正确的 data-style 属性来添加更多过渡样式

      <select
      className="select select-bordered select-sm max-w-xs"
        onChange={(e) =>
          (document.documentElement.dataset.style = e.target.value)
        }
      >
        <option value="default">Default</option>
        <option value="vertical">Vertical</option>
        <option value="wipe">Wipe</option>
        <option value="angled">Angled</option>
        <option value="flip">Flip</option>
        <option value="slides">Slides</option>
      &lt;/select&gt;

反应示例

如果你喜欢这种类型的 css 技巧，请考虑关注 jhey

好了，本文到此结束，带大家了解了《查看过渡主题动画》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！