Remove animejs (#982)

_vendors.yml

@@ -1,11 +1,6 @@
 # This file is automatically generated
 # See https://github.com/next-theme/plugins
 
-anime:
-  name: animejs
-  version: 3.2.1
-  file: lib/anime.min.js
-  integrity: sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=
 fontawesome:
   name: '@fortawesome/fontawesome-free'
   version: 7.0.0

scripts/helpers/next-vendors.js

@@ -4,7 +4,7 @@
 
 hexo.extend.helper.register('js_vendors', function() {
   const { config, theme } = this;
-  const vendors = ['anime'];
+  const vendors = [];
   if (theme.prism.enable && !config.prismjs.preprocess) {
     vendors.push('prism', 'prism_autoloader');
     if (config.prismjs.line_number) {

source/js/bookmark.js

@@ -31,17 +31,25 @@ document.addEventListener('DOMContentLoaded', () => {
     // Save the position by clicking the icon
     link.addEventListener('click', () => {
       doSaveScroll();
-      window.anime({
-        targets : link,
+      if (typeof link.animate !== 'function') {
+        link.style.top = '-30px';
+        setTimeout(() => {
+          link.style.top = '';
+        }, 600);
+        return;
+      }
+      const animation = link.animate([{}, { top: '-30px' }], {
         duration: 200,
         easing  : 'linear',
-        top     : -30,
-        complete: () => {
-          setTimeout(() => {
-            link.style.top = '';
-          }, 400);
-        }
+        fill    : 'forwards'
       });
+      animation.finished.then(() => {
+        link.style.top = '-30px';
+        animation.cancel();
+        setTimeout(() => {
+          link.style.top = '';
+        }, 400);
+      }).catch(() => {});
     });
     scrollToMark();
     document.addEventListener('pjax:success', scrollToMark);

source/js/motion.js

@@ -14,16 +14,38 @@ NexT.motion.integrator = {
     return this;
   },
   bootstrap() {
+    if (typeof Element.prototype.animate !== 'function') {
+      document.body.classList.remove('use-motion');
+      CONFIG.motion.enable = false;
+      return;
+    }
     if (!CONFIG.motion.async) this.queue = [this.queue.flat()];
-    this.queue.forEach(sequence => {
-      const timeline = window.anime.timeline({
-        duration: CONFIG.motion?.duration ?? 200,
-        easing  : 'linear'
-      });
-      sequence.forEach(item => {
-        if (item.deltaT) timeline.add(item, item.deltaT);
-        else timeline.add(item);
-      });
+    this.queue.forEach(sequence => this.schedule(sequence));
+  },
+  schedule(sequence) {
+    let cursor = 0;
+    sequence.forEach(item => {
+      const duration = item.duration ?? CONFIG.motion?.duration ?? 200;
+      const start = Math.max(0, cursor - (item.overlap ?? 0));
+      const end = start + duration;
+      cursor = Math.max(cursor, end);
+
+      if (item.styles) {
+        const targets = typeof item.targets === 'string' ? document.querySelectorAll(item.targets) : [item.targets].filter(Boolean);
+        targets.forEach(target => {
+          const animation = target.animate([{}, item.styles], {
+            delay : start,
+            duration,
+            easing: 'linear',
+            fill  : 'forwards'
+          });
+          animation.finished.then(() => {
+            Object.assign(target.style, item.styles);
+            animation.cancel();
+          }).catch(() => {});
+        });
+      }
+      if (item.complete) setTimeout(item.complete, end);
     });
   }
 };
@@ -35,18 +57,17 @@ NexT.motion.middleWares = {
     function getMistLineSettings(targets) {
       sequence.push({
         targets,
-        scaleX  : [0, 1],
+        styles  : { transform: 'scaleX(1)' },
         duration: 500,
-        deltaT  : '-=200'
+        overlap : 200
       });
     }
 
     function pushToSequence(targets, sequenceQueue = false) {
       sequence.push({
         targets,
-        opacity: 1,
-        top    : 0,
-        deltaT : sequenceQueue ? '-=200' : '-=0'
+        styles : { opacity: 1, top: '0px' },
+        overlap: sequenceQueue ? 200 : 0
       });
     }
 
@@ -64,7 +85,7 @@ NexT.motion.middleWares = {
         sequence.push({
           targets,
           complete: () => targets.classList.add('animated', menuItemTransition),
-          deltaT  : '-=200'
+          overlap : 200
         });
       });
     }
@@ -92,7 +113,7 @@ NexT.motion.middleWares = {
         sequence.push({
           targets,
           complete: () => targets.classList.add('animated', animation),
-          deltaT  : '-=100'
+          overlap : 100
         });
       });
     }
@@ -101,7 +122,7 @@ NexT.motion.middleWares = {
       sequence.push({
         targets,
         complete: () => targets.classList.add('animated', post_block),
-        deltaT  : '-=100'
+        overlap : 100
       });
       animate(coll_header, targets.querySelectorAll('.collection-header'));
       animate(post_header, targets.querySelectorAll('.post-header'));
@@ -123,7 +144,7 @@ NexT.motion.middleWares = {
         sequence.push({
           targets,
           complete: () => targets.classList.add('animated', sidebarTransition),
-          deltaT  : '-=100'
+          overlap : 100
         });
       });
     }
@@ -133,7 +154,7 @@ NexT.motion.middleWares = {
   footer() {
     return [{
       targets: document.querySelector('.footer'),
-      opacity: 1
+      styles : { opacity: 1 }
     }];
   }
 };