Animations
AOS Offical link Preview link
npm i vue-aosIn your main.ts file all the following code:
import AosVue from "aos-vue";
.use(AosVue)Inside Your template tags add
<CommonCard3 headerTitle="true" title="AOS Example animation">
<ClientOnly>
<MasonryWall class="row gallery grid my-gallery" :items="aos" :column-width="350" :gap="15">
<template v-slot:default="{ item, index }" class="grid-item col-md-3 col-sm-6">
<aos-vue :animation="item.animation">
<a @click="showImg(index)">
<img :src="getImages(item.image)" alt="Image description" class="img-thumbnail" />
</a>
</aos-vue>
</template>
</MasonryWall>
</ClientOnly>
<vue-easy-lightbox :index="indexRef" :visible="visible" :imgs="lightBoxImages" @hide="handleHide">
</vue-easy-lightbox>
</CommonCard3>
Inside Your script tags add
import { aos } from "~/core/data/masonry"
import { getImages } from "~/composables/common/getImages"
interface value {
image: string,
animation: string
}
let lightBoxImages = ref([])
let indexRef = ref(0)
let visible = ref(false)
function showImg(index: number) {
aos.forEach((item: value) => {
lightBoxImages.value.push({ src: '/images/' + item.image })
})
indexRef.value = index
visible.value = true
}
function handleHide() {
visible.value = false
} Inside ts add
interface anim {
image: string,
animation: string
}
export const aos: anim[] = [
{ image: "masonry/1.jpg", animation: "fade-down" },
{ image: "masonry/2.jpg", animation: "zoom-out-down" },
{ image: "masonry/3.jpg", animation: "flip-down" },
{ image: "masonry/4.jpg", animation: "fade-up" },
{ image: "masonry/5.jpg", animation: "flip-down" },
{ image: "masonry/6.jpg", animation: "fade-up" },
{ image: "masonry/7.jpg", animation: "flip-down" },
{ image: "masonry/8.jpg", animation: "fade-up" },
{ image: "masonry/9.jpg", animation: "flip-down" },
{ image: "masonry/10.jpg", animation: "fade-up" },
{ image: "masonry/11.jpg", animation: "flip-down" },
{ image: "masonry/12.jpg", animation: "fade-up" },
{ image: "masonry/14.jpg", animation: "flip-down" },
{ image: "masonry/15.jpg", animation: "flip-left" },
{ image: "masonry/13.jpg", animation: "flip-down" },
{ image: "masonry/4.jpg", animation: "zoom-out" },
{ image: "masonry/5.jpg", animation: "flip-right" },
{ image: "masonry/6.jpg", animation: "zoom-out" },
{ image: "masonry/7.jpg", animation: "zoom-out-up" },
{ image: "masonry/8.jpg", animation: "zoom-out-down" },
{ image: "masonry/9.jpg", animation: "flip-down" },
{ image: "masonry/10.jpg", animation: "slide-up" },
{ image: "masonry/9.jpg", animation: "flip-down" },
{ image: "masonry/10.jpg", animation: "fade-up" },
{ image: "masonry/11.jpg", animation: "flip-down" },
{ image: "masonry/12.jpg", animation: "fade-up" },
{ image: "masonry/14.jpg", animation: "flip-down" },
{ image: "masonry/15.jpg", animation: "flip-left" },
{ image: "masonry/13.jpg", animation: "flip-down" },
{ image: "masonry/4.jpg", animation: "zoom-out" },
{ image: "masonry/5.jpg", animation: "flip-right" },
{ image: "masonry/6.jpg", animation: "zoom-out" },
{ image: "masonry/7.jpg", animation: "zoom-out-up" },
{ image: "masonry/8.jpg", animation: "zoom-out-down" },
{ image: "masonry/9.jpg", animation: "flip-down" },
]Animate Preview link
Inside Your template tags add
<div id="animation-box">
<transition appear="" :enter-active-class="enterClass">
<div class="box" :key="store.show">
<div class="card">
<div class="animate-widget">
<div><img class="img-fluid" :src="getImages('banner/3.jpg')" alt=""></div>
<div class="text-center p-25">
<p class="text-muted mb-0">Denouncing pleasure and praising pain was
born and I will give you a complete account of the system, and
expound the actual teachings</p>
</div>
</div>
</div>
</div>
</transition>
</div>
<form class="theme-form text-center">
<div class="mb-3">
<select v-model="animation" @change="selectAnimate"
class="form-select input input--dropdown js-animations text-center text-md-start">
<option v-for="(anim, index) in animationList" :value="anim" :key="index">{{ anim }}
</option>
</select>
</div>
<button class="js-triggeraNimation btn btn-primary" @click.prevent="selectAnimated(store.animation)">Animate
it</button>
</form>Inside Your script tags add
import { animationList, animation, show } from "~/composables/common/animationView"
import { getImages } from "~/composable/getImage"
const store = useUikitsStore();
const enterClass = computed(() => {
return `animated ${store.animation}`;
})Inside ts data add
export let show = ref<boolean>(true)
export let animation = ref<string>('bounce')
export let animationList = ref<string[]>([
"bounce",
"flash",
"flip",
"headShake",
"hinge",
"jello",
"pulse",
"rubberBand",
"shake",
"swing",
"tada",
"wobble",
"bounceIn",
"bounceInDown",
"bounceInLeft",
"bounceInRight",
"bounceInUp",
"fadeIn",
"fadeInDown",
"fadeInDownBig",
"fadeInLeft",
"fadeInLeftBig",
"fadeInRight",
"fadeInRightBig",
"fadeInUp",
"fadeInUpBig",
"flipInX",
"flipInY",
"lightSpeedIn",
"rollIn",
"rotateIn",
"rotateInDownLeft",
"rotateInDownRight",
"rotateInUpLeft",
"rotateInUpRight",
"slideInDown",
"slideInLeft",
"slideInRight",
"slideInUp",
"zoomIn",
"zoomInDown",
"zoomInLeft",
"zoomInRight",
"zoomInUp",
"bounceOut",
"bounceOutDown",
"bounceOutLeft",
"bounceOutRight",
"bounceOutUp",
"fadeOut",
"fadeOutDown",
"fadeOutDownBig",
"fadeOutLeft",
"fadeOutLeftBig",
"fadeOutRight",
"fadeOutRightBig",
"fadeOutUp",
"fadeOutUpBig",
"flipOutX",
"flipOutY",
"lightSpeedOut",
"rollOut",
"rotateOut",
"rotateOutDownLeft",
"rotateOutDownRight",
"rotateOutUpLeft",
"rotateOutUpRight",
"slideOutDown",
"slideOutLeft",
"slideOutRight",
"slideOutUp",
"slideOutRight",
"zoomOut",
"zoomOutDown",
"zoomOutLeft",
"zoomOutRight",
"zoomOutUp"
])