@enso-ui/transitions 2.0.4 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/transitions",
-  "version": "2.0.4",
+  "version": "2.0.8",
   "description": "A collection of Vue transitions",
   "main": "index.js",
   "scripts": {
@@ -31,7 +31,7 @@
     "autoprefixer": "^9.6.1",
     "babel-eslint": "^10.0.1",
     "cross-env": "^6.0.0",
-    "eslint": "^7.0",
+    "eslint": "^7.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-vue": "^8.0.3"
   }

package/src/transitions/Fade.vue

@@ -1,14 +1,17 @@
 <template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated fadeIn"
-        leave-active-class="animated fadeOut">
-        <slot/>
-    </transition>
+  <transition v-bind="$attrs"
+    appear
+    mode="in-out"
+    enter-active-class="animate__animated animate__fadeIn"
+    leave-active-class="animate__animated animate__fadeOut">
+      <slot/>
+  </transition>
 </template>
 
 <script>
+import 'animate.css';
+
 export default {
-    name: 'Fade',
+  name: 'Fade',
 };
 </script>

package/src/transitions/FadeDown.vue

@@ -1,13 +1,15 @@
 <template>
     <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated fadeInDown"
-        leave-active-class="animated fadeOutDown">
+      appear
+      enter-active-class="animate__animated animate__fadeInDown"
+      leave-active-class="animate__animated animate__fadeOutDown">
         <slot/>
     </transition>
 </template>
 
 <script>
+import 'animate.css';
+
 export default {
     name: 'FadeDown',
 };

package/src/transitions/FadeLeft.vue

@@ -1,14 +1,16 @@
 <template>
     <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated fadeInLeft"
-        leave-active-class="animated fadeOutLeft">
+      appear
+      enter-active-class="animate__animated animate__fadeInLeft"
+      leave-active-class="animate__animated animate__fadeOutLeft">
         <slot/>
     </transition>
 </template>
 
 <script>
+import 'animate.css';
+
 export default {
-    name: 'FadeLeft',
+  name: 'FadeLeft',
 };
 </script>

package/src/transitions/FadeRight.vue

@@ -1,14 +1,16 @@
 <template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated fadeInRight"
-        leave-active-class="animated fadeOutRight">
-        <slot/>
-    </transition>
+  <transition v-bind="$attrs"
+    appear
+    enter-active-class="animate__animated animate__fadeInRight"
+    leave-active-class="animate__animated animate__fadeOutRight">
+      <slot/>
+  </transition>
 </template>
 
 <script>
+import 'animate.css';
+
 export default {
-    name: 'FadeRight',
+  name: 'FadeRight',
 };
 </script>

package/src/transitions/FadeUp.vue

@@ -1,14 +1,16 @@
 <template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated fadeInUp"
-        leave-active-class="animated fadeOutUp">
-        <slot/>
-    </transition>
+  <transition v-bind="$attrs"
+    appear
+    enter-active-class="animate__animated animate__fadeInUp"
+    leave-active-class="animate__animated animate__fadeOutUp">
+      <slot/>
+  </transition>
 </template>
 
 <script>
+import 'animate.css';
+
 export default {
-    name: 'FadeUp',
+  name: 'FadeUp',
 };
 </script>

package/src/transitions/HorizontalFade.vue

@@ -1,21 +1,23 @@
 <template>
-    <transition v-bind="$attrs"
-        appear
-        :enter-active-class="`animated ${rtl ? 'fadeInRight' : 'fadeInLeft'}`"
-        :leave-active-class="`animated ${rtl ? 'fadeOutRight' : 'fadeOutLeft'}`">
-        <slot/>
-    </transition>
+  <transition v-bind="$attrs"
+    appear
+    :enter-active-class="`animate__animated animate__${rtl ? 'fadeInRight' : 'fadeInLeft'}`"
+    :leave-active-class="`animate__animated animate__${rtl ? 'fadeOutRight' : 'fadeOutLeft'}`">
+      <slot/>
+  </transition>
 </template>
 
 <script>
+import 'animate.css';
+
 export default {
-    name: 'HorizontalFade',
+  name: 'HorizontalFade',
 
-    props: {
-        rtl: {
-            type: Boolean,
-            default: false,
-        },
-    },
+  props: {
+      rtl: {
+          type: Boolean,
+          default: false,
+      },
+  },
 };
 </script>

package/src/transitions/HorizontalSlide.vue

@@ -1,21 +1,23 @@
 <template>
-    <transition v-bind="$attrs"
-        appear
-        :enter-active-class="`animated ${rtl ? 'slideInRight' : 'slideInLeft'}`"
-        :leave-active-class="`animated ${rtl ? 'slideOutRight' : 'slideOutLeft'}`">
-        <slot/>
-    </transition>
+  <transition v-bind="$attrs"
+    appear
+    :enter-active-class="`animate__animated animate__${rtl ? 'slideInRight' : 'slideInLeft'}`"
+    :leave-active-class="`animate__animated animate__${rtl ? 'slideOutRight' : 'slideOutLeft'}`">
+      <slot/>
+  </transition>
 </template>
 
 <script>
+import 'animate.css';
+
 export default {
-    name: 'HorizontalSlide',
+  name: 'HorizontalSlide',
 
-    props: {
-        rtl: {
-            type: Boolean,
-            default: false,
-        },
-    },
+  props: {
+      rtl: {
+          type: Boolean,
+          default: false,
+      },
+  },
 };
 </script>

package/src/transitions/SlideDown.vue

@@ -1,14 +1,16 @@
 <template>
     <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated slideInDown"
-        leave-active-class="animated slideOutUp">
+      appear
+      enter-active-class="animate__animated animate__slideInDown"
+      leave-active-class="animate__animated animate__slideOutUp">
         <slot/>
     </transition>
 </template>
 
 <script>
+import 'animate.css';
+
 export default {
-    name: 'SlideDown',
+  name: 'SlideDown',
 };
 </script>

package/src/transitions/SlideLeft.vue

@@ -1,14 +1,16 @@
 <template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated slideInLeft"
-        leave-active-class="animated slideOutLeft">
-        <slot/>
-    </transition>
+  <transition v-bind="$attrs"
+    appear
+    enter-active-class="animate__animated animate__slideInLeft"
+    leave-active-class="animate__animated animate__slideOutLeft">
+      <slot/>
+  </transition>
 </template>
 
 <script>
+import 'animate.css';
+
 export default {
-    name: 'SlideLeft',
+  name: 'SlideLeft',
 };
 </script>

package/src/transitions/SlideRight.vue

@@ -1,14 +1,16 @@
 <template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated slideInRight"
-        leave-active-class="animated slideOutRight">
-        <slot/>
-    </transition>
+  <transition v-bind="$attrs"
+    appear
+    enter-active-class="animate__animated animate__slideInRight"
+    leave-active-class="animate__animated animate__slideOutRight">
+      <slot/>
+  </transition>
 </template>
 
 <script>
+import 'animate.css';
+
 export default {
-    name: 'SlideRight',
+  name: 'SlideRight',
 };
 </script>

package/src/transitions/SlideUp.vue

@@ -1,14 +1,16 @@
 <template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated slideInUp"
-        leave-active-class="animated slideOutDown">
-        <slot/>
-    </transition>
+  <transition v-bind="$attrs"
+    appear
+    enter-active-class="animate__animated animate__slideInUp"
+    leave-active-class="animate__animated animate__slideOutDown">
+      <slot/>
+  </transition>
 </template>
 
 <script>
+import 'animate.css';
+
 export default {
-    name: 'SlideUp',
+  name: 'SlideUp',
 };
 </script>

package/src/transitions/Zoom.vue

@@ -1,14 +1,16 @@
 <template>
-    <transition v-bind="$attrs"
-        appear
-        enter-active-class="animated zoomIn"
-        leave-active-class="animated zoomOut">
-        <slot/>
-    </transition>
+  <transition v-bind="$attrs"
+    appear
+    enter-active-class="animate__animated animate__zoomIn"
+    leave-active-class="animate__animated animate__zoomOut">
+      <slot/>
+  </transition>
 </template>
 
 <script>
+import 'animate.css';
+
 export default {
-    name: 'Zoom',
+  name: 'Zoom',
 };
 </script>