refactor(tooltip): remove animejs

materializecss · Dec 15, 2023 · 2220700 · 2220700
1 parent 9534e8a
commit 2220700
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 21 deletions.
diff --git a/sass/components/_tooltip.scss b/sass/components/_tooltip.scss
@@ -1,21 +1,29 @@
 .material-tooltip {
-  padding: 10px 8px;
-  font-size: 1rem;
-  z-index: 2000;
-  border-radius: 2px;
+  // font-family: var(--md-sys-typescale-body-small-font-family-name);
+  padding: 0 8px;  
+  border-radius: 4px;
+
+  background-color: $tooltip-bg-color;
   color: $tooltip-font-color;
-  min-height: 36px;
-  line-height: 120%;
+
+  font-size: var(--md-sys-typescale-body-small-font-size);
+  line-height: vat(--md-sys-typescale-body-small-line-height);
+  min-height: 24px;
   opacity: 0;
-  position: absolute;
   text-align: center;
+
+  position: absolute;
   max-width: calc(100% - 4px);
   overflow: hidden;
   left: 0;
   top: 0;
   pointer-events: none;
+
+  display: flex;
+  align-items: center;
+
   visibility: hidden;
-  background-color: $tooltip-bg-color;
+  z-index: 2000;
 }
 
 .backdrop {

diff --git a/sass/components/_variables.scss b/sass/components/_variables.scss
@@ -359,8 +359,8 @@ $toast-action-color: #eeff41;
 // 20. Tooltips
 // ==========================================================================
 
-$tooltip-bg-color: var(--tooltip-background-color) !default;
-$tooltip-font-color: var(--tooltip-font-color) !default;
+$tooltip-bg-color: var(--md-sys-color-inverse-surface) !default;
+$tooltip-font-color: var(--md-sys-color-inverse-on-surface) !default;
 
 
 // 21. Typography

diff --git a/src/tooltip.ts b/src/tooltip.ts
@@ -1,5 +1,3 @@
-import anim from "animejs";
-
 import { Utils } from "./utils";
 import { Bounding } from "./bounding";
 import { Component, BaseOptions, InitElements, MElement } from "./component";
@@ -299,18 +297,28 @@ export class Tooltip extends Component<TooltipOptions> {
   _animateIn() {
     this._positionTooltip();
     this.tooltipEl.style.visibility = 'visible';
-    anim.remove(this.tooltipEl);
-    anim({
-      targets: this.tooltipEl,
-      opacity: this.options.opacity || 1,
-      translateX: this.xMovement,
-      translateY: this.yMovement,
-      duration: this.options.inDuration,
-      easing: 'easeOutCubic'
-    });
+    const duration = this.options.inDuration;
+    // easeOutCubic
+    this.tooltipEl.style.transition = `
+      transform ${duration}ms ease-out,
+      opacity ${duration}ms ease-out`;
+    setTimeout(() => {
+      this.tooltipEl.style.transform = `translateX(${this.xMovement}px) translateY(${this.yMovement}px)`;
+      this.tooltipEl.style.opacity = (this.options.opacity || 1).toString();
+    }, 1);
   }
 
   _animateOut() {
+    const duration = this.options.outDuration;
+    // easeOutCubic
+    this.tooltipEl.style.transition = `
+      transform ${duration}ms ease-out,
+      opacity ${duration}ms ease-out`;
+    setTimeout(() => {
+      this.tooltipEl.style.transform = `translateX(0px) translateY(0px)`;
+      this.tooltipEl.style.opacity = '0';
+    }, 1);
+    /*
     anim.remove(this.tooltipEl);
     anim({
       targets: this.tooltipEl,
@@ -320,6 +328,7 @@ export class Tooltip extends Component<TooltipOptions> {
       duration: this.options.outDuration,
       easing: 'easeOutCubic'
     });
+    */
   }
 
   _handleMouseEnter = () => {