本文包括的动画：
- 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>
