fix: CToast: fix appear animation and SSR

Author: woothu

src/components/toast/CToast.vue

@@ -1,8 +1,8 @@
 <template>
-  <transition :name="props.fade ? 'fade' : null" appear> 
+  <transition :name="props.fade ? 'fade' : null" :appear="true"> 
     <div
-      v-show="isShowed"
-      :class="toastClasses"
+      v-if="isShowed"
+      class="toast"
       role="alert"
       aria-live="assertive"
       aria-atomic="true"
@@ -48,30 +48,21 @@ export default {
   },
   data () {
     return {
-      isShowed: false,
+      isShowed: this.show,
       hidding: false,
       timeout: null,
       hiddingTimeout: null
     }
   },
   watch: {
-    show (val) {
-      val ? this.display() : this.close()
+    show: {
+      immediate: true,
+      handler (val) {
+        val ? this.display() : this.close()
+      }
     }
   },
-  //needed not to be called in show watcher to allow SSR
-  mounted () {
-    this.show ? this.display() : this.close()
-  },
   computed: {
-    toastClasses () {
-      return [
-        'toast',
-        {
-          'show': this.isShowed,
-        }
-      ]
-    },
     directlyDeclaredProps () {
       return Object.keys(this.$options.propsData)
     },
@@ -94,8 +85,9 @@ export default {
       this.$nextTick(() => {
         if (this.props.autohide) {
           this.setAutohide()
+        } else if (this.hidding === true) {
+          this.finishHidding()
         }
-        this.finishHidding()
       })
     },
     close (restoreOnHover = false) {
@@ -148,6 +140,9 @@ export default {
 </script>
 
 <style scoped>
+  .toast {
+    opacity: inherit;
+  }
   .fade-enter-active {
     transition: opacity .5s;
   }

src/components/toast/tests/__snapshots__/CToast.spec.js.snap

@@ -2,13 +2,12 @@
 
 exports[`CToast renders correctly 1`] = `
 <div
-  appear=""
+  appear="true"
   aria-atomic="true"
   aria-live="assertive"
-  class="toast show"
+  class="toast"
   position="static"
   role="alert"
-  style=""
 >
   <!---->
    
@@ -20,14 +19,13 @@ exports[`CToast renders correctly 1`] = `
 
 exports[`CToast renders correctly custom wrapper 1`] = `
 <div
-  appear=""
+  appear="true"
   aria-atomic="true"
   aria-live="assertive"
-  class="toast show"
+  class="toast"
   name="fade"
   position="bottom-center"
   role="alert"
-  style=""
 >
   <div
     class="toast-header"

src/components/toast/tests/__snapshots__/CToaster.spec.js.snap

@@ -11,12 +11,11 @@ exports[`CToaster renders correctly custom wrapper 1`] = `
   class="toaster toaster-top-left"
 >
   <div
-    appear=""
+    appear="true"
     aria-atomic="true"
     aria-live="assertive"
-    class="toast show"
+    class="toast"
     role="alert"
-    style=""
   >
     <!---->