vue实现的常见的动画效果

本文包括的动画：

• zoom-in
  • zoom-in-left
  • zoom-in-right
  • zoom-in-top
  • zoom-in-bottom
  • zoom-in-center-x
  • zoom-in-center-y
• slide
  • slide-left
  • slide-right
  • slide-top
  • slide-bottom

zoom-in-left

.ivy-zoom-in-left-enter-active,
.ivy-zoom-in-left-leave-active {
    transition: all 0.3s ease;
}

.ivy-zoom-in-left-enter-from,
.ivy-zoom-in-left-leave-to {
    transform-origin: top left;
    opacity: 0;
    transform: scaleX(0.5);
}

.ivy-zoom-in-left-enter-to,
.ivy-zoom-in-left-leave-from {
    transform-origin: top left;
    opacity: 1;
    transform: scaleX(1);
}

zoom-in-right

.ivy-zoom-in-right-enter-active,
.ivy-zoom-in-right-leave-active {
    transition: all 0.3s ease;
}

.ivy-zoom-in-right-enter-from,
.ivy-zoom-in-right-leave-to {
    transform-origin: top right;
    opacity: 0;
    transform: scaleX(0.5);
}

.ivy-zoom-in-right-enter-to,
.ivy-zoom-in-right-leave-from {
    transform-origin: top right;
    opacity: 1;
    transform: scaleX(1);
}

zoom-in-top

.ivy-zoom-in-top-enter-active,
.ivy-zoom-in-top-leave-active {
    transition: all 0.3s ease;
}

.ivy-zoom-in-top-enter-from,
.ivy-zoom-in-top-leave-to {
    transform-origin: top left;
    opacity: 0;
    transform: scaleY(0.5);
}

.ivy-zoom-in-top-enter-to,
.ivy-zoom-in-top-leave-from {
    transform-origin: top left;
    opacity: 1;
    transform: scaleY(1);
}

zoom-in-bottom

.ivy-zoom-in-bottom-enter-active,
.ivy-zoom-in-bottom-leave-active {
    transition: all 0.3s ease;
}

.ivy-zoom-in-bottom-enter-from,
.ivy-zoom-in-bottom-leave-to {
    transform-origin: bottom left;
    opacity: 0;
    transform: scaleY(0.5);
}

.ivy-zoom-in-bottom-enter-to,
.ivy-zoom-in-bottom-leave-from {
    transform-origin: bottom left;
    opacity: 1;
    transform: scaleY(1);
}

zoom-in-center-x

.ivy-zoom-in-center-x-enter-active,
.ivy-zoom-in-center-x-leave-active {
    transition: all 0.3s ease;
}

.ivy-zoom-in-center-x-enter-from,
.ivy-zoom-in-center-x-leave-to {
    transform-origin: center center;
    opacity: 0;
    transform: scaleY(0);
}

.ivy-zoom-in-center-x-enter-to,
.ivy-zoom-in-center-x-leave-from {
    transform-origin: center center;
    opacity: 1;
    transform: scaleY(1);
}

zoom-in-center-y

.ivy-zoom-in-center-y-enter-active,
.ivy-zoom-in-center-y-leave-active {
    transition: all 0.3s ease;
}

.ivy-zoom-in-center-y-enter-from,
.ivy-zoom-in-center-y-leave-to {
    transform-origin: center center;
    opacity: 0;
    transform: scaleX(0);
}

.ivy-zoom-in-center-y-enter-to,
.ivy-zoom-in-center-y-leave-from {
    transform-origin: center center;
    opacity: 1;
    transform: scaleX(1);
}

slide-left

.ivy-slide-left-enter-active,
.ivy-slide-left-leave-active {
    transition: all 0.3s ease;
}

.ivy-slide-left-enter-from,
.ivy-slide-left-leave-to {
    transform-origin: top left;
    opacity: 0;
    transform: translateX(-80%);
}

.ivy-slide-left-enter-to,
.ivy-slide-left-leave-from {
    transform-origin: top left;
    opacity: 1;
    transform: translateX(0);
}

slide-right

.ivy-slide-right-enter-active,
.ivy-slide-right-leave-active {
    transition: all 0.3s ease;
}

.ivy-slide-right-enter-from,
.ivy-slide-right-leave-to {
    transform-origin: top right;
    opacity: 0;
    transform: translateX(80%);
}

.ivy-slide-right-enter-to,
.ivy-slide-right-leave-from {
    transform-origin: top right;
    opacity: 1;
    transform: translateX(0);
}

slide-top

.ivy-slide-top-enter-active,
.ivy-slide-top-leave-active {
    transition: all 0.3s ease;
}

.ivy-slide-top-enter-from,
.ivy-slide-top-leave-to {
    transform-origin: top left;
    opacity: 0;
    transform: translateY(-100%);
}

.ivy-slide-top-enter-to,
.ivy-slide-top-leave-from {
    transform-origin: top left;
    opacity: 1;
    transform: translateY(0);
}

slide-bottom

.ivy-slide-bottom-enter-active,
.ivy-slide-bottom-leave-active {
    transition: all 0.3s ease;
}

.ivy-slide-bottom-enter-from,
.ivy-slide-bottom-leave-to {
    transform-origin: bottom left;
    opacity: 0;
    transform: translateY(100%);
}

.ivy-slide-bottom-enter-to,
.ivy-slide-bottom-leave-from {
    transform-origin: bottom left;
    opacity: 1;
    transform: translateY(0);
}

在vue中使用

<template>
    <transition name="ivy-slide-bottom">
        <div v-show="visible"></div>
    </transition>
</template>
<script setup>
import { ref } from "vue";
const visible = ref(false);
</script>
<style>
.ivy-slide-bottom-enter-active,
.ivy-slide-bottom-leave-active {
    transition: all 0.3s ease;
}

.ivy-slide-bottom-enter-from,
.ivy-slide-bottom-leave-to {
    transform-origin: bottom left;
    opacity: 0;
    transform: translateY(100%);
}

.ivy-slide-bottom-enter-to,
.ivy-slide-bottom-leave-from {
    transform-origin: bottom left;
    opacity: 1;
    transform: translateY(0);
}
</style>

代码演示