refactor(components): [carousel] simplify the code for motion blur (#20696)

packages/components/carousel/__tests__/carousel.test.tsx

@@ -210,14 +210,20 @@ describe('Carousel', () => {
         state.val = val
         state.oldVal = prevVal
       },
-      interval: 100,
       'motion-blur': true,
     })
 
     await nextTick()
-    await wait(100)
-    const items = wrapper.vm.$el.querySelectorAll('.el-transitioning')
-    expect(items.length).toBe(1)
+
+    const el = wrapper.vm.$el.querySelector('.el-carousel__container')
+
+    let event = new Event('transitionstart')
+    el.dispatchEvent(event)
+    expect(el.classList.contains('el-transitioning')).toBe(true)
+
+    event = new Event('transitionend')
+    el.dispatchEvent(event)
+    expect(el.classList.contains('el-transitioning')).toBe(false)
   })
 
   it('should guarantee order of indicators', async () => {

packages/components/carousel/src/carousel.vue

@@ -41,8 +41,9 @@
       </button>
     </transition>
     <div
-      :class="carouselContainer"
+      :class="ns.e('container')"
       :style="containerStyle"
+      @transitionstart="handleTransitionStart"
       @transitionend="handleTransitionEnd"
     >
       <PlaceholderItem />
@@ -114,11 +115,9 @@ const {
   containerStyle,
   handleButtonEnter,
   handleButtonLeave,
-  isTransitioning,
   handleIndicatorClick,
   handleMouseEnter,
   handleMouseLeave,
-  handleTransitionEnd,
   setActiveItem,
   prev,
   next,
@@ -139,18 +138,6 @@ const carouselClasses = computed(() => {
   return classes
 })
 
-const carouselContainer = computed(() => {
-  const classes = [ns.e('container')]
-  if (props.motionBlur && unref(isTransitioning) && items.value.length > 1) {
-    classes.push(
-      unref(isVertical)
-        ? `${ns.namespace.value}-transitioning-vertical`
-        : `${ns.namespace.value}-transitioning`
-    )
-  }
-  return classes
-})
-
 const indicatorsClasses = computed(() => {
   const classes = [ns.e('indicators'), ns.em('indicators', props.direction)]
   if (unref(hasLabel)) {
@@ -165,6 +152,24 @@ const indicatorsClasses = computed(() => {
   return classes
 })
 
+function handleTransitionStart(e: TransitionEvent) {
+  if (!props.motionBlur) return
+
+  const kls = unref(isVertical)
+    ? `${ns.namespace.value}-transitioning-vertical`
+    : `${ns.namespace.value}-transitioning`
+  ;(e.currentTarget as HTMLDivElement).classList.add(kls)
+}
+
+function handleTransitionEnd(e: TransitionEvent) {
+  if (!props.motionBlur) return
+
+  const kls = unref(isVertical)
+    ? `${ns.namespace.value}-transitioning-vertical`
+    : `${ns.namespace.value}-transitioning`
+  ;(e.currentTarget as HTMLDivElement).classList.remove(kls)
+}
+
 defineExpose({
   /** @description active slide index */
   activeIndex,

packages/components/carousel/src/use-carousel.ts

@@ -47,8 +47,6 @@ export const useCarousel = (
   const root = ref<HTMLDivElement>()
   const containerHeight = ref<number>(0)
   const isItemsTwoLength = ref(true)
-  const isFirstCall = ref(true)
-  const isTransitioning = ref(false)
 
   // computed
   const arrowDisplay = computed(
@@ -105,26 +103,14 @@ export const useCarousel = (
   }
 
   const playSlides = () => {
-    if (!isFirstCall.value) {
-      isTransitioning.value = true
-    }
-    isFirstCall.value = false
-
     if (activeIndex.value < items.value.length - 1) {
       activeIndex.value = activeIndex.value + 1
     } else if (props.loop) {
       activeIndex.value = 0
-    } else {
-      isTransitioning.value = false
     }
   }
 
   function setActiveItem(index: number | string) {
-    if (!isFirstCall.value) {
-      isTransitioning.value = true
-    }
-    isFirstCall.value = false
-
     if (isString(index)) {
       const filteredItems = items.value.filter(
         (item) => item.props.name === index
@@ -191,10 +177,6 @@ export const useCarousel = (
     startTimer()
   }
 
-  function handleTransitionEnd() {
-    isTransitioning.value = false
-  }
-
   function handleButtonEnter(arrow: 'left' | 'right') {
     if (unref(isVertical)) return
     items.value.forEach((item, index) => {
@@ -212,20 +194,12 @@ export const useCarousel = (
   }
 
   function handleIndicatorClick(index: number) {
-    if (index !== activeIndex.value) {
-      if (!isFirstCall.value) {
-        isTransitioning.value = true
-      }
-    }
     activeIndex.value = index
   }
 
   function handleIndicatorHover(index: number) {
     if (props.trigger === 'hover' && index !== activeIndex.value) {
       activeIndex.value = index
-      if (!isFirstCall.value) {
-        isTransitioning.value = true
-      }
     }
   }
 
@@ -345,13 +319,11 @@ export const useCarousel = (
     hasLabel,
     hover,
     isCardType,
-    isTransitioning,
     items,
     isVertical,
     containerStyle,
     isItemsTwoLength,
     handleButtonEnter,
-    handleTransitionEnd,
     handleButtonLeave,
     handleIndicatorClick,
     handleMouseEnter,