refactor(experimental/breaking): remove animate.css (#1272)

* refactor(experimental/breaking): remove animate.css - header normal is removed - auto hide comment and back to top button is removed * feat: hide back to top button at the top
2025-04-29 15:57:35 +08:00 · 2024-05-16 14:14:43 +01:00 · 2024-05-16 14:14:43 +01:00 · ff8ab51206
commit ff8ab51206
parent 74e723e79b
26 changed files with 50 additions and 160 deletions
--- a/README.md
+++ b/README.md
@ -209,7 +209,6 @@ Thanks to the authors of following resources included in the theme:

 * [Font Awesome](https://fontawesome.com/)
 * [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
 * [Fuse.js](https://fusejs.io/)
--- a/README.zh-cn.md
+++ b/README.zh-cn.md
@ -195,7 +195,6 @@ DoIt 主题中用到了以下项目，感谢它们的作者：

 * [Font Awesome](https://fontawesome.com/)
 * [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
 * [Fuse.js](https://fusejs.io/)
--- a/assets/css/_core/_media.scss
+++ b/assets/css/_core/_media.scss
@ -63,14 +63,7 @@
  .page {
    width: 100% !important;
    margin-left: auto !important;
-
-    [header-mobile] & {
-      padding-top: $header-height;
-    }
-
-    [header-mobile=normal] & {
-      padding-top: 0;
-    }
+    padding-top: $header-height;

    .categories-card, .author-card, .series-card {
      .card-item {
--- a/assets/css/_page/_index.scss
+++ b/assets/css/_page/_index.scss
@ -3,13 +3,7 @@
  max-width: 800px;
  width: 60%;
  margin: 0 auto;
-  [header-desktop] & {
-    padding-top: $header-height;
-  }
-
-  [header-desktop=normal] & {
-    padding-top: 0;
-  }
+  padding-top: $header-height;

  @include blur;
 }
--- a/assets/css/_partial/_fixed-button.scss
+++ b/assets/css/_partial/_fixed-button.scss
@ -1,9 +1,4 @@
-#fixed-buttons {
-  display: none;
-}
-
 .fixed-button {
-  display: none;
  z-index: 100;
  position: fixed;
  right: 1.5rem;
@ -14,13 +9,9 @@
  // background: $global-border-color; // 原 light $global-border-color dark,black $header-background-color
  background: $header-background-color;
  @include border-radius(2rem);
-  @include transition(color 0.4s ease);
-
  @include blur;
-
  &:hover, &:active {
    color: $global-font-color;
-    cursor: pointer;
  }

  &:active, &:focus, &:hover {
--- a/assets/css/_partial/_header.scss
+++ b/assets/css/_partial/_header.scss
@ -151,10 +151,6 @@ header {
  height: $header-height;
  line-height: $header-height;

-  [header-desktop=normal] & {
-    position: static;
-  }
-
  .header-wrapper {
    padding: 0 2rem 0 10%;

@ -213,10 +209,6 @@ header {
  height: $header-height;
  line-height: $header-height;

-  [header-mobile=normal] & {
-    position: static;
-  }
-
  .header-container {
    padding: 0;
    margin: 0;
--- a/assets/css/_partial/_single/_toc.scss
+++ b/assets/css/_partial/_single/_toc.scss
@ -47,10 +47,6 @@
  left: 80%;
  width: 20%;

-  [header-desktop=normal] & {
-    top: 5rem;
-  }
-
  @include blur;

  .toc-title {
--- a/assets/css/main.css
+++ b/assets/css/main.css
@ -926,6 +926,10 @@ html.dark {
  color: var(--global-link-color);
 }

+.tw-opacity-0 {
+  opacity: 0;
+}
+
 .tw-shadow-black {
  --tw-shadow-color: #000;
  --tw-shadow: var(--tw-shadow-colored);
@ -951,6 +955,12 @@ html.dark {
  transition-duration: 150ms;
 }

+.tw-transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .tw-duration-300 {
  transition-duration: 300ms;
 }
--- a/assets/data/cdn/jsdelivr.yml
+++ b/assets/data/cdn/jsdelivr.yml
@ -5,8 +5,6 @@ prefix:
 libFiles:
  # algoliasearch@4.11.0 https://github.com/algolia/algoliasearch-client-javascript
  algoliasearchJS: algoliasearch@4.11.0/dist/algoliasearch.umd.min.js
-  # animate.css@4.1.1 https://github.com/daneden/animate.css
-  animateCSS: animate.css@4.1.1/animate.min.css
  # aplayer@1.10.1 https://github.com/MoePlayer/APlayer
  aplayerCSS: aplayer@1.10.1/dist/APlayer.min.css
  aplayerJS: aplayer@1.10.1/dist/APlayer.min.js
--- a/assets/js/theme.ts
+++ b/assets/js/theme.ts
@ -32,24 +32,6 @@ function isMobileWindow () {
  return window.matchMedia('only screen and (max-width: 680px)').matches
 }

-/**
- * Animate the element with AnimateCSS. https://animate.style/
- * @param {HTMLElement} element The element to animate.
- * @param {Array} animation The animation selected.
- * @param {boolean} reserved Whether to execute the callback after the animation is ended.
- * @param {function} callback The callback gets exectued after the element is animated.
- */
-function animateCSS (element, animation, reserved, callback) {
-  if (!Array.isArray(animation)) animation = [animation]
-  element.classList.add('animate__animated', ...animation)
-  const handler = () => {
-    element.classList.remove('animate__animated', ...animation)
-    element.removeEventListener('animationend', handler)
-    if (typeof callback === 'function') callback()
-  }
-  if (!reserved) element.addEventListener('animationend', handler)
-}
-

 /**
 * Initialize the mobile menu bar.
@ -636,46 +618,13 @@ function initMeta () {
 }

 function onScroll () {
-  const $headers = []
-  const $viewComments = document.getElementById('view-comments')
-  if (document.body.getAttribute('header-desktop') === 'auto') $headers.push(document.getElementById('header-desktop'))
-  if (document.body.getAttribute('header-mobile') === 'auto') $headers.push(document.getElementById('header-mobile'))
-  if (document.getElementById('comments')) {
-    $viewComments.href = '#comments'
-    $viewComments.style.display = 'block'
-  } else {
-    $viewComments.style.display = 'null'
-  }
-  const $fixedButtons = document.getElementById('fixed-buttons')
-  const ACCURACY = 20; const MINIMUM = 100
+  const backToTop = document.getElementById("back-to-top-button")
  function handleScrollEvent () {
    window.newScrollTop = getScrollTop()
-    const scroll = window.newScrollTop - window.oldScrollTop
-    const isMobile = isMobileWindow()
-    forEach($headers, $header => {
-      if (scroll > ACCURACY) {
-        $header.classList.remove('animate__fadeInDown')
-        animateCSS($header, ['animate__fadeOutUp', 'animate__faster'], true)
-      } else if (scroll < -ACCURACY || window.newScrollTop <= 20) {
-        $header.classList.remove('animate__fadeOutUp')
-        animateCSS($header, ['animate__fadeInDown', 'animate__faster'], true)
-      }
-    })
-    if (window.newScrollTop > MINIMUM) {
-      if (isMobile && scroll > ACCURACY) {
-        $fixedButtons.classList.remove('animate__fadeIn')
-        animateCSS($fixedButtons, ['animate__fadeOut', 'animate__faster'], true)
-      } else if (!isMobile || scroll < -ACCURACY) {
-        $fixedButtons.style.display = 'block'
-        $fixedButtons.classList.remove('animate__fadeOut')
-        animateCSS($fixedButtons, ['animate__fadeIn', 'animate__faster'], true)
-      }
+    if (window.newScrollTop > 20) {
+      backToTop.style.opacity = '1'
    } else {
-      if (!isMobile) {
-        $fixedButtons.classList.remove('animate__fadeIn')
-        animateCSS($fixedButtons, ['animate__fadeOut', 'animate__faster'], true)
-      }
-      $fixedButtons.style.display = 'none'
+      backToTop.style.opacity = '0'
    }
    for (const event of window.scrollEventSet) event()
    window.oldScrollTop = window.newScrollTop
--- a/assets/lib/VERSION
+++ b/assets/lib/VERSION
@ -1,5 +1,4 @@
 algoliasearch@4.11.0 https://github.com/algolia/algoliasearch-client-javascript
-animate.css@4.1.1 https://github.com/daneden/animate.css
 aplayer@1.10.1 https://github.com/MoePlayer/APlayer
 autocomplete.js@0.38.0 https://github.com/algolia/autocomplete.js
 clipboard.js@2.0.8 https://github.com/zenorocha/clipboard.js
--- a/assets/lib/animate/animate.min.css
+++ b/assets/lib/animate/animate.min.css
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@ -41,12 +41,6 @@ srcsetLargeResizeMethod = "800x webp Lanczos q75"
 # Header config
 # 页面头部导航栏配置
 [header]
-  # desktop header mode ("fixed", "normal", "auto")
-  # 桌面端导航栏模式 ("fixed", "normal", "auto")
-  desktopMode = "fixed"
-  # mobile header mode ("fixed", "normal", "auto")
-  # 移动端导航栏模式 ("fixed", "normal", "auto")
-  mobileMode = "auto"
  # theme change mode ("switch", "select")
  # 主题切换模式 ("switch", "select")
  themeChangeMode = "select"
--- a/exampleSite/content/about/index.en.md
+++ b/exampleSite/content/about/index.en.md
@ -90,7 +90,6 @@ Thanks to the authors of following resources included in the theme:

 * [Font Awesome](https://fontawesome.com/)
 * [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
 * [Fuse.js](https://fusejs.io/)
--- a/exampleSite/content/about/index.zh-cn.md
+++ b/exampleSite/content/about/index.zh-cn.md
@ -90,7 +90,6 @@ DoIt 主题中用到了以下项目，感谢它们的作者：

 * [Font Awesome](https://fontawesome.com/)
 * [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
 * [Fuse.js](https://fusejs.io/)
--- a/exampleSite/content/posts/theme-documentation-basics/index.en.md
+++ b/exampleSite/content/posts/theme-documentation-basics/index.en.md
@ -271,10 +271,6 @@ Please open the code block below to view the complete sample configuration {{< f
      ignoreFieldNorm = false
  # Header config
  [params.header]
-    # desktop header mode ("fixed", "normal", "auto")
-    desktopMode = "fixed"
-    # mobile header mode ("fixed", "normal", "auto")
-    mobileMode = "auto"
    # {{< version 0.2.11 >}} Theme change mode
    # theme change mode ("switch", "select")
    themeChangeMode = "select"
--- a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
@ -275,10 +275,6 @@ optimizeImages = true

  # 页面头部导航栏配置
  [params.header]
-    # 桌面端导航栏模式 ("fixed", "normal", "auto")
-    desktopMode = "fixed"
-    # 移动端导航栏模式 ("fixed", "normal", "auto")
-    mobileMode = "auto"
    # {{< version 0.2.11 >}} 主题切换模式
    # 主题切换模式 ("switch", "select")
    themeChangeMode = "select"
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -24,7 +24,7 @@
    {{- partial "head/seo.html" . -}}
 </head>

-<body header-desktop="{{ .Site.Params.header.desktopMode }}" header-mobile="{{ .Site.Params.header.mobileMode }}">
+<body>
    {{- /* Check theme isDark before body rendering */ -}}
    {{- $theme := .Site.Params.defaulttheme -}}
    <script type="text/javascript">
@ -78,14 +78,16 @@

    <div id="fixed-buttons" class="print:!tw-hidden">
        {{- /* top button */ -}}
-        <a href="#back-to-top" id="back-to-top-button" class="fixed-button" title="{{ T `backToTop` }}">
+        <a href="#back-to-top" id="back-to-top-button" class="fixed-button tw-transition-opacity tw-opacity-0" title="{{ T `backToTop` }}">
            {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "arrow-up") }}
        </a>

        {{- /* comment button */ -}}
-        <a href="#" id="view-comments" class="fixed-button" title="{{ T `viewComments` }}">
+        {{- if  (.Page.Scratch.Get "this").commentEnabled -}}
+        <a href="#comments" id="view-comments" class="fixed-button" title="{{ T `viewComments` }}">
            {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "comment") }}
        </a>
+        {{- end -}}
    </div>

    {{- /* Load JavaScript scripts and CSS */ -}}
--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@ -10,7 +10,7 @@
 {{- define "content" -}}
    <div class="page archive">
        {{- /* Title */ -}}
-        <h2 class="single-title animate__animated animate__pulse animate__faster">
+        <h2 class="single-title">
            {{- .Params.Title | default (T .Section) | default .Section | dict "Some" | T "allSome" -}}
        </h2>

--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -5,7 +5,7 @@
    {{- $params := .Scratch.Get "params" -}}
    <div class="page single special print:!tw-w-full print:!tw-max-w-none print:!tw-m-0 print:!tw-p-0">
        {{- /* Title */ -}}
-        <h1 class="single-title animate__animated animate__pulse animate__faster">
+        <h1 class="single-title">
            {{- .Title -}}
        </h1>

--- a/layouts/partials/comment.html
+++ b/layouts/partials/comment.html
@ -4,6 +4,7 @@
 {{- $commentConfig := dict -}}

 {{- if $comment.enable -}}
+    {{- .Scratch.SetInMap "this" "commentEnabled" true -}}
    <div id="comments" class="print:!tw-hidden">
        {{- /* Disqus Comment System */ -}}
        {{- $disqus := $comment.disqus | default dict -}}
--- a/layouts/partials/head/link.html
+++ b/layouts/partials/head/link.html
@ -49,11 +49,6 @@
 {{- $style = dict "Context" . "ToCSS" $options | merge $style -}}
 {{- partial "plugin/style.html" $style -}}

-{{- /* Animate.css */ -}}
-{{- $source := $cdn.animateCSS | default "lib/animate/animate.min.css" -}}
-{{- $style := dict "Source" $source "Fingerprint" $fingerprint "Defer" true -}}
-{{- partial "plugin/style.html" $style -}}
-
 {{- if .Site.Params.enablePWA | and hugo.IsProduction -}}
    {{ $options := dict }}
    {{ $options = dict "targetPath" "sw.min.js" | merge $options }}
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@ -34,7 +34,7 @@

    <article class="page single print:!tw-w-full print:!tw-max-w-none print:!tw-m-0 print:!tw-p-0">
        {{- /* Title */ -}}
-        <h1 class="single-title animate__animated animate__flipInX">{{ .Title }}</h1>
+        <h1 class="single-title">{{ .Title }}</h1>

        {{- /* Subtitle */ -}}
        {{- with $params.subtitle -}}
--- a/layouts/taxonomy/list.html
+++ b/layouts/taxonomy/list.html
@ -11,7 +11,7 @@
    {{- $params := .Scratch.Get "params" -}}
    <div class="page archive">
        {{- /* Title */ -}}
-        <h2 class="single-title animate__animated animate__pulse animate__faster">
+        <h2 class="single-title">
            {{- $taxonomy := .Data.Singular -}}
            {{- if eq $taxonomy "category" -}}
                {{ partial "plugin/fontawesome.html" (dict "Style" "regular" "Icon" "folder-open") }}&nbsp;{{ .Title }}
--- a/layouts/taxonomy/terms.html
+++ b/layouts/taxonomy/terms.html
@ -8,7 +8,7 @@

    <div class="page archive">
        {{- /* Title */ -}}
-        <h2 class="single-title animate__animated animate__pulse animate__faster">
+        <h2 class="single-title">
            {{- .Params.Title | default (T $taxonomies) | default $taxonomies | dict "Some" | T "allSome" -}}
        </h2>

--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,34 +1,29 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  prefix: 'tw-',
-  content: ['./layouts/**/*.html'],
-  darkMode: 'class',
+  prefix: "tw-",
+  content: ["./layouts/**/*.html"],
+  darkMode: "class",
  theme: {
    extend: {
      colors: {
-        'fgColor-default' : 'var(--fgColor-default)',
-        'fgColor-secondary' : 'var(--fgColor-secondary)',
-        'fgColor-muted' : 'var(--fgColor-muted)',
-        'fgColor-link' : 'var(--fgColor-link)',
-        'fgColor-link-hover' : 'var(--fgColor-link-hover)',
-        'fgColor-link-muted': 'var(--global-link-color)',
-        'fgColor-link-muted-hover': 'var(--global-link-hover-color)',
-        'bgColor-default' : 'var(--bgColor-default)',
-        'bgColor-secondary' : 'var(--bgColor-secondary)',
-        'bgColor-accent-emphasis' : 'var(--bgColor-accent-emphasis)',
-        'bgColor-accent-muted' : 'var(--bgColor-accent-muted)',
-        'borderColor-default' : 'var(--borderColor-default)',
-        'selection-bgColor' : 'var(--selection-bgColor)',
-        'button-default-bgColor-rest' : 'var(--button-default-bgColor-rest)',
-        'button-default-bgColor-hover' : 'var(--button-default-bgColor-hover)',
-      }
-    }
+        "fgColor-default": "var(--fgColor-default)",
+        "fgColor-secondary": "var(--fgColor-secondary)",
+        "fgColor-muted": "var(--fgColor-muted)",
+        "fgColor-link": "var(--fgColor-link)",
+        "fgColor-link-hover": "var(--fgColor-link-hover)",
+        "fgColor-link-muted": "var(--global-link-color)",
+        "fgColor-link-muted-hover": "var(--global-link-hover-color)",
+        "bgColor-default": "var(--bgColor-default)",
+        "bgColor-secondary": "var(--bgColor-secondary)",
+        "bgColor-accent-emphasis": "var(--bgColor-accent-emphasis)",
+        "bgColor-accent-muted": "var(--bgColor-accent-muted)",
+        "borderColor-default": "var(--borderColor-default)",
+        "selection-bgColor": "var(--selection-bgColor)",
+        "button-default-bgColor-rest": "var(--button-default-bgColor-rest)",
+        "button-default-bgColor-hover": "var(--button-default-bgColor-hover)",
+      },
+    },
  },
-  safelist: [
-    'tw-text-wrap',
-    '!tw-max-h-0',
-  ],
-  plugins: [
-    require('tailwindcss-aria-attributes')
-  ]
-}
+  safelist: ["tw-text-wrap", "!tw-max-h-0"],
+  plugins: [require("tailwindcss-aria-attributes")],
+};