在 Vue 开发中，我们可以利用<transition>组件来打造各种令人惊艳的动画效果。下面来详细看看这些有趣的动画效果及其实现代码。
一、缩放类效果
zoom-in（整体放大进入）
html
<template>
<div>
<button @click="isShow =! isShow">显示/隐藏</button>
<transition name="zoom-in">
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
.zoom-in-enter-active {
animation: zoomIn 0.5s ease;
}
@keyframes zoomIn {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
</style>zoom-in-left（从左侧放大进入）
html
<template>
<div>
<button @click="isShow =! isShow">显示/隐藏</button>
<transition name="zoom-in-left">
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
.zoom-in-left-enter-active {
animation: zoomInLeft 0.5s ease;
}
@keyframes zoomInLeft {
from {
transform: scale(0) translateX(-100%);
}
to {
transform: scale(1) translateX(0);
}
}
</style>zoom-in-right（从右侧放大进入）
html
<template>
<div>
<button @click="isShow =! isShow">显示/隐藏</button>
<transition name="zoom-in-right">
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
.zoom-in-right-enter-active {
animation: zoomInRight 0.5s ease;
}
@keyframes zoomInRight {
from {
transform: scale(0) translateX(100%);
}
to {
transform: scale(1) translateX(0);
}
}
</style>zoom-in-top（从顶部放大进入）
html
<template>
<div>
<button @click="isShow =! isShow">显示/隐藏</button>
<transition name="zoom-in-top">
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
.zoom-in-top-enter-active {
animation: zoomInTop 0.5s ease;
}
@keyframes zoomInTop {
from {
transform: scale(0) translateY(-100%);
}
to {
transform: scale(1) translateY(0);
}
}
</style>zoom-in-bottom（从底部放大进入）
html
<template>
<div>
<button @click="isShow =! isShow">显示/隐藏</button>
<transition name="zoom-in-bottom">
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
.zoom-in-bottom-enter-active {
animation: zoomInBottom 0.5s ease;
}
@keyframes zoomInBottom {
from {
transform: scale(0) translateY(100%);
}
to {
transform: scale(1) translateY(0);
}
}
</style>zoom-in-center-x（沿水平中心轴放大进入）
html
<template>
<div>
<button @click="isShow =! isShow">显示/隐藏</button>
<transition name="zoom-in-center-x">
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
.zoom-in-center-x-enter-active {
animation: zoomInCenterX 0.5s ease;
}
@keyframes zoomInCenterX {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
</style>zoom-in-center-y（沿垂直中心轴放大进入）
html
<template>
<div>
<button @click="isShow =! isShow">显示/隐藏</button>
<transition name="zoom-in-center-y">
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
.zoom-in-center-y-enter-active {
animation: zoomInCenterY 0.5s ease;
}
@keyframes zoomInCenterY {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
</style>二、滑动类效果
slide（普通滑动）
html
<template>
<div>
<button @click="isShow =! isShow">显示/隐藏</button>
<transition name="slide">
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
.slide-enter-active {
animation: slideIn 0.5s ease;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
</style>slide-left（向左滑动）
html
<template>
<div>
<button @click="isShow =! isShow">显示/隐藏</button>
<transition name="slide-left">
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
.slide-left-enter-active {
animation: slideLeftIn 0.5s ease;
}
@keyframes slideLeftIn {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
</style>- 向右滑动（slide-right）
html
<template>
<div>
<button @click="isShow =! isShow">显示/隐藏</button>
<transition name="slide-right">
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false
};
}
};
</script>
<style scoped>
.slide-right-enter-active,
.slide-right-leave-active {
transition: all 0.5s ease;
}
.slide-right-enter,
.slide-right-leave-to {
transform: translateX(-100%);
}
</style>- 向上滑动（slide-top）
html
<template>
<div>
<button @click="isShow =! isShow">显示/隐藏</button>
<transition name="slide-top">
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false
};
}
};
</script>
<style scoped>
.slide-top-enter-active,
.slide-top-leave-active {
transition: all 0.5s ease;
}
.slide-top-enter,
.slide-top-leave-to {
transform: translateY(-100%);
}
</style>- 向下滑动（slide-bottom）
html
<template>
<div class="slide-bottom-animation" v-if="showBottom">向下滑动示例</div>
</template>
<script>
export default {
data() {
return {
showBottom: false
};
}
};
</script>
<style scoped>
.slide-bottom-enter-active,
.slide-bottom-leave-active {
transition: all 0.5s ease;
}
.slide-bottom-enter,
.slide-bottom-leave-to {
transform: translateY(100%);
}
</style>三、淡入淡出效果
html
<template>
<div>
<button @click="isShow =! isShow">显示/隐藏</button>
<transition name="fade-animation">
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
isShow: true
};
}
};
</script>
<style scoped>
.fade-animation-enter-active,
.fade-animation-leave-active {
transition: opacity 0.5s ease;
}
.fade-animation-enter,
.fade-animation-leave-to {
opacity: 0;
}
</style>