✨(component): ✨(component): 新增轮播图支持过渡动画，默认为滑动,修复autoplay为false时仍自动播放问题

ISSUES CLOSED: #I50UP9

package/component/src/component/carousel/index.less

@@ -38,6 +38,7 @@
   background-color: #f8f8f8;
   transition-duration: 0.3s;
   -webkit-transition-duration: 0.3s;
+  overflow: hidden;
 }
 
 .layui-carousel-updown > * {
@@ -205,6 +206,7 @@
   right: 20px;
   width: auto;
   height: auto;
+  transform: translateY(-50%);
 }
 
 .layui-carousel[lay-anim="updown"] .layui-carousel-ind ul {

package/component/src/component/carousel/index.vue

@@ -53,6 +53,15 @@ const active = computed({
   },
 });
 
+const anim = computed({
+  get() {
+    return props.anim;
+  },
+  set() {
+    
+  },
+});
+
 const emit = defineEmits(["update:modelValue", "change"]);
 
 const change = function (id: any) {
@@ -85,6 +94,7 @@ watch(
 
 provide("active", active);
 provide("slotsChange", slotsChange);
+provide("anim", anim);
 
 const sub = () => {
   for (var i = 0; i < childrens.value.length; i++) {
@@ -128,6 +138,7 @@ const autoplay = () => {
 watch(
   () => props.autoplay,
   () => {
+    if(props.autoplay)
     setInterval(autoplay, props.interval);
   },
   { immediate: true }

package/component/src/component/carouselItem/index.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { inject, Ref } from "vue";
+import { inject, Ref, computed, ref, VNodeChild } from "vue";
 
 const props = defineProps<{
   id: string;
@@ -14,10 +14,90 @@ const props = defineProps<{
 const active = inject("active");
 const slotsChange: Ref<boolean> = inject("slotsChange") as Ref<boolean>;
 slotsChange.value = !slotsChange.value;
+
+const anim = inject("anim");
+const item = ref();
+const getStyle = computed<any>(() => {
+  if (item.value) {
+    let allChild = item.value.parentNode.children;
+    let allChildNum = allChild.length;
+
+    //当前的activeIndex
+    let activeIndex,
+      currentIndex = 0;
+    for (let index = 0; index < allChild.length; index++) {
+      const element = allChild[index];
+      // @ts-ignore
+      if (element.__vnode.props["data-id"] === active.value) {
+        activeIndex = index;
+      }
+      if (element.__vnode.props["data-id"] === props.id) {
+        currentIndex = index;
+      }
+    }
+    // @ts-ignore
+    let prevIndex = activeIndex > 0 ? activeIndex - 1 : allChildNum - 1;
+    // @ts-ignore
+    let nextIndex = activeIndex + 1 < allChildNum ? activeIndex + 1 : 0;
+    // @ts-ignore
+    let animation = anim.value;
+    //状态 上一个 当前 下一个
+    if (activeIndex === currentIndex) {
+      if (animation === "updown") {
+        return {
+          transform: "translateY(0)",
+        };
+      } else if (animation.includes("fade")) {
+        return {
+          opacity: 1,
+        };
+      } else {
+        return {
+          transform: "translateX(0)",
+        };
+      }
+    }
+
+    if (prevIndex === currentIndex) {
+      if (animation === "updown") {
+        return {
+          transform: "translateY(-100%)",
+        };
+      } else if (animation.includes("fade")) {
+        return {
+          opacity: 0,
+        };
+      } else {
+        return {
+          transform: "translateX(-100%)",
+        };
+      }
+    }
+    if (nextIndex === currentIndex) {
+      if (animation === "updown") {
+        return {
+          transform: "translateY(100%)",
+        };
+      } else if (animation.includes("fade")) {
+        return {
+          opacity: 0,
+        };
+      } else {
+        return {
+          transform: "translateX(100%)",
+        };
+      }
+    }
+
+    return {
+      display: "none",
+    };
+  }
+});
 </script>
 
 <template>
-  <li v-if="active === id">
+  <li ref="item" :style="getStyle" :data-id="id">
     <slot></slot>
   </li>
 </template>