style: toast加动画

src/packages/toast/index.scss

@@ -85,15 +85,15 @@
   }
 }
 
-.toastfade-enter-active {
-  transition: opacity 0.1s;
+.toast-fade-enter-active {
+  transition: opacity 0.3s;
 }
 
-.toastfade-leave-active {
+.toast-fade-leave-active {
   transition: opacity 0.3s;
 }
 
-.toastfade-enter,
-.toastfade-leave-active {
+.toast-fade-enter-from,
+.toast-fade-leave-to {
   opacity: 0;
 }

src/packages/toast/index.vue

@@ -1,9 +1,8 @@
 <template>
-  <transition name="toastfade">
+  <Transition name="toast-fade" @after-leave="onAfterLeave">
     <view
-      :id="id"
       :class="toastBodyClass"
-      v-if="visible"
+      v-show="state.mounted"
       :style="{
         bottom: center ? 'auto' : bottom + 'px',
         'background-color': coverColor
@@ -23,21 +22,17 @@
         <view class="nut-toast-text" v-html="msg"></view>
       </view>
     </view>
-  </transition>
+  </Transition>
 </template>
 <script>
 import Icon from '../icon';
-import { toRefs, reactive, computed, watch } from 'vue';
+import { toRefs, toRef, reactive, computed, watch, onMounted } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('toast');
 export default create({
   props: {
     id: String,
     msg: String,
-    visible: {
-      type: Boolean,
-      default: false
-    },
     duration: {
       type: Number,
       default: 2000
@@ -89,8 +84,13 @@ export default create({
     'nut-icon': Icon
   },
   setup(props) {
-    console.log('props', props);
     let timer;
+    const state = reactive({
+      mounted: false
+    });
+    onMounted(() => {
+      state.mounted = true;
+    });
     const clearTimer = () => {
       if (timer) {
         clearTimeout(timer);
@@ -98,9 +98,7 @@ export default create({
       }
     };
     const hide = () => {
-      clearTimer();
-      props.unmount(props.id);
-      props.onClose && props.onClose();
+      state.mounted = false;
     };
     const show = () => {
       clearTimer();
@@ -111,7 +109,6 @@ export default create({
       }
     };
     const clickCover = () => {
-      console.log('click');
       if (props.closeOnClickOverlay) {
         hide();
       }
@@ -131,7 +128,6 @@ export default create({
     );
 
     const hasIcon = computed(() => {
-      console.log(props.type);
       if (props.type !== 'text') {
         return true;
       } else {
@@ -149,11 +145,20 @@ export default create({
         'nut-toast-' + props.size
       ];
     });
+
+    const onAfterLeave = () => {
+      clearTimer();
+      props.unmount(props.id);
+      props.onClose && props.onClose();
+    };
+
     return {
+      state,
       hide,
       clickCover,
       hasIcon,
-      toastBodyClass
+      toastBodyClass,
+      onAfterLeave
     };
   }
 });

src/packages/toast/toast.ts

@@ -4,7 +4,6 @@ const ToastConstructor = defineComponent(VueToast);
 const defaultOptions = {
   msg: '',
   id: '',
-  visible: true,
   duration: 2000, //显示时间(毫秒)
   center: true,
   type: 'text',