style(components): [anchor] marker transition change (#16023)

* style(components): [anchor] marker transition change * fix(components): [anchor] clear animate scroll
element-plus · Mar 4, 2024 · bd35931 · bd35931
1 parent 6cdb7e0
commit bd35931
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/packages/components/anchor/src/anchor.vue b/packages/components/anchor/src/anchor.vue
@@ -71,16 +71,19 @@ const setCurrentAnchor = (href: string) => {
   }
 }
 
+let clearAnimate: (() => void) | null = null
+
 const scrollToAnchor = (href: string) => {
   if (!containerEl.value) return
   const target = getElement(href)
   if (!target) return
+  if (clearAnimate) clearAnimate()
   isScrolling = true
   const scrollEle = getScrollElement(target, containerEl.value)
   const distance = getOffsetTopDistance(target, scrollEle)
   const max = scrollEle.scrollHeight - scrollEle.clientHeight
   const to = Math.min(distance - props.offset, max)
-  animateScrollTo(
+  clearAnimate = animateScrollTo(
     containerEl.value,
     currentScrollTop,
     to,

diff --git a/packages/theme-chalk/src/anchor.scss b/packages/theme-chalk/src/anchor.scss
@@ -25,7 +25,7 @@
       height: 14px;
       top: 8px;
       left: 0;
-      transition: top .25s cubic-bezier(0,1,.5,1),opacity .25s;
+      transition: top .25s ease-in-out,opacity .25s;
     }
 
     @include e(list) {
@@ -56,7 +56,7 @@
       height: 2px;
       width: 20px;
       bottom: 0;
-      transition: left .25s cubic-bezier(0,1,.5,1),opacity .25s, width .25s;
+      transition: left .25s ease-in-out,opacity .25s, width .25s;
     }
 
     @include e(list) {

diff --git a/packages/utils/dom/scroll.ts b/packages/utils/dom/scroll.ts
@@ -1,7 +1,7 @@
 import { isClient } from '../browser'
 import { easeInOutCubic } from '../easings'
 import { isWindow } from '../types'
-import { rAF } from '../raf'
+import { cAF, rAF } from '../raf'
 import { getStyle } from './style'
 
 export const isScroll = (el: HTMLElement, isVertical?: boolean): boolean => {
@@ -112,6 +112,7 @@ export function animateScrollTo(
 ) {
   const startTime = Date.now()
 
+  let handle: number | undefined
   const scroll = () => {
     const timestamp = Date.now()
     const time = timestamp - startTime
@@ -128,13 +129,17 @@ export function animateScrollTo(
       container.scrollTop = nextScrollTop
     }
     if (time < duration) {
-      rAF(scroll)
+      handle = rAF(scroll)
     } else if (typeof callback === 'function') {
       callback()
     }
   }
 
   scroll()
+
+  return () => {
+    handle && cAF(handle)
+  }
 }
 
 export const getScrollElement = (