fixed animation

adecrown · Mar 29, 2020 · d834ec9 · d834ec9
1 parent fd16c26
commit d834ec9
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -79,19 +79,19 @@ this.$whoosh({
 
 All props below are optional.
 
-| Name          | Type    | Default                | Description                                                            |
-| ------------- | ------- | ---------------------- | ---------------------------------------------------------------------- |
-| duration      | Number  | 5                      | how long you want the notification to stay on for (5 equals 5 seconds) |
-| fill          | Boolean | false                  | fill the whole card with the status color                              |
-| closeOnClick  | Boolean | false                  | notification will only close when it's clicked on                      |
-| textColor     | String  | black                  | set the text color to what you prefer                                  |
-| progressColor | String  | #dcd9d9                | set the progress color to what you prefer                              |
-| size          | Object  | {width:500,height:210} | use it to set your prefered width and height                           |
-| messageStyle  | Object  |                        | give a custom style to the message section                             |
-| titleStyle    | Object  |                        | give a custom style to the title section                               |
-| display | left or right | right| controls which side the notification should come out from |
-| mobileDisplay | top or bottom | top | controls which position the notification should be displayed on mobile
-| isResponsive |  Boolean | true | handles responsiveness of notifications. Set it to false if you don't want the mobile view.
+| Name          | Type          | Default                | Description                                                                                 |
+| ------------- | ------------- | ---------------------- | ------------------------------------------------------------------------------------------- |
+| duration      | Number        | 5                      | how long you want the notification to stay on for (5 equals 5 seconds)                      |
+| fill          | Boolean       | false                  | fill the whole card with the status color                                                   |
+| closeOnClick  | Boolean       | false                  | notification will only close when it's clicked on                                           |
+| textColor     | String        | black                  | set the text color to what you prefer                                                       |
+| progressColor | String        | #dcd9d9                | set the progress color to what you prefer                                                   |
+| size          | Object        | {width:500,height:210} | use it to set your prefered width and height                                                |
+| messageStyle  | Object        |                        | give a custom style to the message section                                                  |
+| titleStyle    | Object        |                        | give a custom style to the title section                                                    |
+| display       | left or right | right                  | controls which side the notification should come out from                                   |
+| mobileDisplay | top or bottom | top                    | controls which position the notification should be displayed on mobile                      |
+| isResponsive  | Boolean       | true                   | handles responsiveness of notifications. Set it to false if you don't want the mobile view. |
 
 #### Custom Status
 

diff --git a/src/components/Whoosh/DefaultCard.vue b/src/components/Whoosh/DefaultCard.vue
@@ -1,67 +1,68 @@
 <template>
-  <transition name="slide-fade">
-    <Mobile 
-    v-if="isMobile"
-    @click="$emit('click')" 
-    :textColor="textColor" 
-    :content="content" 
-    :statusColor="statusColor"
-    :position="position"
-    :closeOnClick="closeOnClick"
-    :progressColor="progressColor"
-    :moveProgress="moveProgress"
-    :mobileDisplay="mobileDisplay"
-  />
-    <div v-else>
-    <ExpandedCard 
-      v-if="expand" 
-      @expandDefault="expandDefault" 
-      :data="expandable" 
-      :defaultContent="content" 
-      :defStyle="mainStyle"
-      :fill="fill" 
-      :statusColor="statusColor"
-      :display="display"
-    />
-    <Card
-      v-else
-      :mainStyle="mainStyle"
-    >
-      <More 
-        @click="expandDefault" 
-        :display="display" 
-        :expand="expand" 
-        :color="buttonColor" 
-        v-if="expandable"
+  <transition>
+    <transition name="mobile-fade" v-if="isMobile">
+      <Mobile 
+        @click="$emit('click')" 
+        :textColor="textColor" 
+        :content="content" 
+        :statusColor="statusColor"
+        :position="position"
+        :closeOnClick="closeOnClick"
+        :progressColor="progressColor"
+        :moveProgress="moveProgress"
+        :mobileDisplay="mobileDisplay"
       />
-      <Progress
-        class="progressdefault"
-        :progress="moveProgress"
-        v-if="!closeOnClick"
-        :color="progressColor"
+    </transition>
+    <transition name="slide-fade" v-else>
+      <ExpandedCard 
+        v-if="expand" 
+        @expandDefault="expandDefault" 
+        :data="expandable" 
+        :defaultContent="content" 
+        :defStyle="mainStyle"
+        :fill="fill" 
+        :statusColor="statusColor"
+        :display="display"
       />
-      <div class="default-noti" @click="$emit('click')" 
-      @mouseover="paused = true"
-      @mouseleave="paused = false">
-        <Status :display="display" :height="setStatusHeight" :fill="fill" :statusColor="statusColor"/>
-        <div
-          class="default__body"
-          :class="{ 'default__body-left': display === 'left' && !fill }"
-        >
-          <div class="default__title" v-if="content.title" :style="titleStyle">
-            {{ content.title }}
-          </div>
+      <Card
+        v-else
+        :mainStyle="mainStyle"
+      >
+        <More 
+          @click="expandDefault" 
+          :display="display" 
+          :expand="expand" 
+          :color="buttonColor" 
+          v-if="expandable"
+        />
+        <Progress
+          class="progressdefault"
+          :progress="moveProgress"
+          v-if="!closeOnClick"
+          :color="progressColor"
+        />
+        <div class="default-noti" @click="$emit('click')" 
+        @mouseover="paused = true"
+        @mouseleave="paused = false">
+          <Status :display="display" :height="setStatusHeight" :fill="fill" :statusColor="statusColor"/>
           <div
-            class="default__message"
-            v-if="content.message"
-            :style="messageStyle"
+            class="default__body"
+            :class="{ 'default__body-left': display === 'left' && !fill }"
           >
-            {{ content.message }}
+            <div class="default__title" v-if="content.title" :style="titleStyle">
+              {{ content.title }}
+            </div>
+            <div
+              class="default__message"
+              v-if="content.message"
+              :style="messageStyle"
+            >
+              {{ content.message }}
+            </div>
           </div>
         </div>
-      </div>
-    </Card>
-    </div>
+      </Card>
+    </transition>
   </transition>
 </template>