Merge pull request #5 from Redskullvue/attention-animations

Feat : Attention Animations Added To The Library

Author: Redskullvue

README.md

@@ -74,12 +74,13 @@ const show = ref(true)
 
 -Library is fully prop based so you can customize the animations based on your need
 
-| Prop         | Type      | Default   | Description                                                                           |
-| ------------ | --------- | --------- | ------------------------------------------------------------------------------------- |
-| **appear**   | `boolean` | `'false'` | If true animation will run on load                                                    |
-| **duration** | `number`  | `500`     | Duration of the animation in milliseconds.                                            |
-| **delay**    | `number`  | `0`       | Delay before the animation starts in milliseconds.                                    |
-| **easing**   | `string`  | `'ease'`  | CSS easing function to control the transition curve(CSS acceptable timing functions). |
+| Prop          | Type              | Default   | Description                                                                                    |
+| ------------- | ----------------- | --------- | ---------------------------------------------------------------------------------------------- |
+| **appear**    | `boolean`         | `'false'` | If true animation will run on load                                                             |
+| **duration**  | `number`          | `500`     | Duration of the animation in milliseconds.                                                     |
+| **delay**     | `number`          | `0`       | Delay before the animation starts in milliseconds.                                             |
+| **easing**    | `string`          | `'ease'`  | CSS easing function to control the transition curve(CSS acceptable timing functions).          |
+| **iteration** | `string , number` | `5`       | Number of time an animation would run based on CSS iteration-count(Only Attention Animations). |
 
 ---
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-transify",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": false,
   "type": "module",
   "main": "dist/vue-transify.umd.js",

playground/App.vue

@@ -10,6 +10,7 @@
           See Motions
         </button>
       </div>
+
       <small class="main-container--version"
         >V-1.2.0 | Developed by
         <a href="https://github.com/Redskullvue">RedskullVue </a>
@@ -53,6 +54,12 @@ import ZoomDown from '@/components/ZoomDown.vue'
 import FlipX from '@/components/FlipX.vue'
 import FlipY from '@/components/FlipY.vue'
 import PageTransitionHelper from '@/components/PageTransitionHelper.vue'
+import Pulse from '@/components/Pulse.vue'
+import Flash from '@/components/Flash.vue'
+import ShakeX from '@/components/ShakeX.vue'
+import ShakeY from '@/components/ShakeY.vue'
+import Swing from '@/components/Swing.vue'
+import Tada from '@/components/Tada.vue'
 
 const showSideBar = ref(true)
 const currentAnimation = shallowRef(Fade)
@@ -75,6 +82,12 @@ const animationMap = {
   ZoomDown,
   FlipX,
   FlipY,
+  Pulse,
+  Flash,
+  ShakeX,
+  ShakeY,
+  Swing,
+  Tada,
 }
 
 const setAnimation = (name) => {

playground/components/sideBar.vue

@@ -29,6 +29,10 @@ import { ref } from 'vue'
 const emits = defineEmits(['closeSideBar', 'selectAnimation'])
 
 const animations = ref([
+  {
+    title: 'Attention Animations',
+    children: ['Pulse', 'Flash', 'ShakeX', 'ShakeY', 'Swing', 'Tada'],
+  },
   {
     title: 'Slides',
     children: ['SlideInUp', 'SlideInDown', 'SlideInLeft', 'SlideInRight'],

src/components/Flash.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-flash"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>

src/components/Pulse.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-pulse"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>

src/components/ShakeX.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-shakex"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>

src/components/ShakeY.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-shakey"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>

src/components/Swing.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-swing"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>

src/components/Tada.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-tada"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>