feat(vue3): update transition classes (https://v3.vuejs.org/guide/mig…

…ration/transition.html) and add tag to TransitionGroup (vuejs/docs#648) (#315)
crutch12 · Oct 24, 2020 · f60f1d4 · f60f1d4
1 parent 206209e
commit f60f1d4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue
@@ -33,6 +33,7 @@
         >
           <TransitionGroup
             :name="transitionLabelName"
+            tag="span"
             class="h-100 flex align-center flex-1 flex justify-content-right"
           >
             <CustomButton
@@ -48,6 +49,7 @@
           </TransitionGroup>
           <TransitionGroup
             :name="transitionLabelName"
+            tag="span"
             class="h-100 flex align-center flex-1 flex"
           >
             <CustomButton
@@ -83,7 +85,10 @@
         :style="{height: (monthDays.length + weekStart) > 35 ? '250px' : '210px'}"
         class="month-container"
       >
-        <TransitionGroup :name="transitionDaysName">
+        <TransitionGroup
+          :name="transitionDaysName"
+          tag="span"
+        >
           <div
             v-for="m in [month]"
             :key="m.month"

diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/HeaderPicker.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/HeaderPicker.vue
@@ -8,7 +8,10 @@
       v-if="!onlyTime"
       class="header-picker-year"
     >
-      <TransitionGroup :name="transitionName">
+      <TransitionGroup
+        :name="transitionName"
+        tag="span"
+      >
         <div
           v-for="y in [year]"
           :key="y"
@@ -25,6 +28,7 @@
       <TransitionGroup
         v-if="!onlyTime"
         :name="transitionName"
+        tag="span"
         class="header-picker-date dots-text flex-1"
       >
         <span
@@ -42,6 +46,7 @@
       >
         <TransitionGroup
           :name="transitionName"
+          tag="span"
           class="dots-text time-number header-picker-hour flex justify-content-right"
         >
           <span
@@ -54,6 +59,7 @@
         <span>:</span>
         <TransitionGroup
           :name="transitionName"
+          tag="span"
           class="dots-text time-number header-picker-minute flex justify-content-left"
         >
           <span
@@ -72,6 +78,7 @@
       >
         <TransitionGroup
           :name="transitionName"
+          tag="span"
           class="dots-text header-picker-hour twelve"
         >
           <span

diff --git a/src/assets/scss/helpers/_animation.scss b/src/assets/scss/helpers/_animation.scss
@@ -2,10 +2,10 @@
 .slide-enter-active, .slide-leave-active {
   opacity: 1;
   z-index: 998;
-  transition: all 0.3s;
+  transition: all .3s;
   transform: translateY(0);
 }
-.slide-enter, .slide-leave-to /* .fade-leave-active below version 2.1.8 */ {
+.slide-enter-from, .slide-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
   z-index: 998;
   transform: translateY(-20px);
@@ -14,10 +14,10 @@
 .slideinvert-enter-active, .slideinvert-leave-active {
   opacity: 1;
   z-index: 998;
-  transition: all 0.3s;
+  transition: all .3s;
   transform: translateY(0);
 }
-.slideinvert-enter, .slideinvert-leave-to /* .fade-leave-active below version 2.1.8 */ {
+.slideinvert-enter-from, .slideinvert-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
   z-index: 998;
   transform: translateY(40px);
@@ -29,10 +29,10 @@
   position: absolute;
   transition: all .3s;
 }
-.slidenext-enter, .slideprev-leave-to {
+.slidenext-enter-from, .slideprev-leave-to {
   transform: translateX(100%);
 }
-.slidenext-leave-to, .slideprev-enter {
+.slidenext-leave-to, .slideprev-enter-from {
   transform: translateX(-100%);
 }
 /** Slide vertical animation  **/
@@ -42,11 +42,11 @@
   position: absolute;
   transition: all .3s;
 }
-.slidevnext-enter, .slidevprev-leave-to {
+.slidevnext-enter-from, .slidevprev-leave-to {
   transform: translateY(100%);
   opacity: 0;
 }
-.slidevnext-leave-to, .slidevprev-enter {
+.slidevnext-leave-to, .slidevprev-enter-from {
   transform: translateY(-100%);
   opacity: 0;
 }