Merge pull request #1 from Redskullvue/add-new-flip-animations

Feat : FlipX and FlipY added

Author: Redskullvue

README.md

@@ -70,25 +70,6 @@ const show = ref(true)
 
 ---
 
-## Animations on 0.9.1
-
--Fade
--BounceDown
--BounceIn
--BounceUp
--RotateDown
--RotateIn
--RotateUp
--SlideInDown
--SlideInUp
--SlideInLeft
--SlideInRight
--ZoomDown
--ZoomIn
--ZoomUp
-
----
-
 ## ⚙️ Props
 
 -Library is fully prop based so you can customize the animations based on your need

playground/App.vue

@@ -45,6 +45,8 @@ import RotateDown from '@/components/RotateDown.vue'
 import ZoomIn from '@/components/ZoomIn.vue'
 import ZoomUp from '@/components/ZoomUp.vue'
 import ZoomDown from '@/components/ZoomDown.vue'
+import FlipX from '@/components/FlipX.vue'
+import FlipY from '@/components/FlipY.vue'
 
 const showSideBar = ref(true)
 const currentAnimation = shallowRef(Fade)
@@ -65,6 +67,8 @@ const animationMap = {
   ZoomIn,
   ZoomUp,
   ZoomDown,
+  FlipX,
+  FlipY,
 }
 
 const setAnimation = (name) => {

playground/components/sideBar.vue

@@ -45,6 +45,11 @@ const animations = ref([
     title: 'Bounces',
     children: ['BounceDown', 'BounceIn', 'BounceUp'],
   },
+
+  {
+    title: 'Flips',
+    children: ['FlipX', 'FlipY'],
+  },
   {
     title: 'Fades',
     children: ['Fade'],

src/components/FlipX.vue

@@ -0,0 +1,19 @@
+<template>
+  <Transition
+    name="flipX"
+    :appear="appear"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-easing': easing,
+      '--animation-delay': delay + 'ms',
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </Transition>
+</template>
+
+<script setup>
+import { commonProps } from './commonProps.js'
+const props = defineProps({ ...commonProps })
+</script>

src/components/FlipY.vue

@@ -0,0 +1,19 @@
+<template>
+  <Transition
+    name="flipY"
+    :appear="appear"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-easing': easing,
+      '--animation-delay': delay + 'ms',
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </Transition>
+</template>
+
+<script setup>
+import { commonProps } from './commonProps.js'
+const props = defineProps({ ...commonProps })
+</script>

src/index.js

@@ -14,6 +14,8 @@ import RotateUp from './components/RotateUp.vue'
 import ZoomDown from './components/ZoomDown.vue'
 import ZoomUp from './components/ZoomUp.vue'
 import ZoomIn from './components/ZoomIn.vue'
+import FlipX from './components/FlipX.vue'
+import FlipY from './components/FlipY.vue'
 
 export {
   Fade,
@@ -30,4 +32,6 @@ export {
   ZoomDown,
   ZoomUp,
   ZoomIn,
+  FlipX,
+  FlipY,
 }

src/styles/animations.css

@@ -425,3 +425,63 @@ GLOBAL VARIABLES (defaults)
   animation: ZoomDown var(--animation-duration, 0.5s) var(--animation-delay, 0s)
     var(--animation-easing, ease) reverse forwards;
 }
+
+@keyframes FlipX {
+  0% {
+    opacity: 0;
+    transform: perspective(100px) rotate3d(1, 0, 0, 90deg);
+  }
+  40% {
+    transform: perspective(100px) rotate3d(1, 0, 0 20deg);
+  }
+  60% {
+    transform: perspective(100px) rotate3d(1, 0, 0, -10deg);
+  }
+  to {
+    transform: perspective(200px);
+  }
+}
+
+/* When entering */
+.flipX-enter-active {
+  position: absolute;
+  animation: FlipX var(--animation-duration, 0.5s) var(--animation-delay, 0s)
+    var(--animation-easing, ease) forwards;
+}
+
+/* When leaving */
+.flipX-leave-active {
+  position: absolute;
+  animation: FlipX var(--animation-duration, 0.5s) var(--animation-delay, 0s)
+    var(--animation-easing, ease) reverse forwards;
+}
+
+@keyframes FlipY {
+  0% {
+    opacity: 0;
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+  }
+  40% {
+    transform: perspective(400px) rotate3d(0, 1, 0 20deg);
+  }
+  60% {
+    transform: perspective(400px) rotate3d(0, 1, 0, -10deg);
+  }
+  to {
+    transform: perspective(400px);
+  }
+}
+
+/* When entering */
+.flipY-enter-active {
+  position: absolute;
+  animation: FlipY var(--animation-duration, 0.5s) var(--animation-delay, 0s)
+    var(--animation-easing, ease) forwards;
+}
+
+/* When leaving */
+.flipY-leave-active {
+  position: absolute;
+  animation: FlipY var(--animation-duration, 0.5s) var(--animation-delay, 0s)
+    var(--animation-easing, ease) reverse forwards;
+}