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>

查看动画演示