Vue 实现的精彩动画效果

在 Vue 开发中，我们可以利用<transition>组件来打造各种令人惊艳的动画效果。下面来详细看看这些有趣的动画效果及其实现代码。

一、缩放类效果

1. zoom-in（整体放大进入）

<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>

2. zoom-in-left（从左侧放大进入）

<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>

3. zoom-in-right（从右侧放大进入）

<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>

4. zoom-in-top（从顶部放大进入）

<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>

5. zoom-in-bottom（从底部放大进入）

<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>

6. zoom-in-center-x（沿水平中心轴放大进入）

<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>

7. zoom-in-center-y（沿垂直中心轴放大进入）

<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>

二、滑动类效果

1. slide（普通滑动）

<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>

2. slide-left（向左滑动）

<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>

3. 向右滑动（slide-right）

<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>

4. 向上滑动（slide-top）

<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>

5. 向下滑动（slide-bottom）

<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>

三、淡入淡出效果

<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>