/ CSS 文件 /@keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); }}@keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); }}@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); }}@keyframes slideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); }}@keyframes slideInUp { from { transform: translateY(100%); } to { transform: translateY(0); }}@keyframes slideOutUp { from { transform: translateY(0); } to { transform: translateY(-100%); }}@keyframes slideInDown { from { transform: translateY(-100%); } to { transform: translateY(0); }}@keyframes slideOutDown { from { transform: translateY(0); } to { transform: translateY(100%); }}.slide-in-left { animation: slideInLeft 0.5s forwards;}.slide-out-left { animation: slideOutLeft 0.5s forwards;}.slide-in-right { animation: slideInRight 0.5s forwards;}.slide-out-right { animation: slideOutRight 0.5s forwards;}.slide-in-up { animation: slideInUp 0.5s forwards;}.slide-out-up { animation: slideOutUp 0.5s forwards;}.slide-in-down { animation: slideInDown 0.5s forwards;}.slide-out-down { animation: slideOutDown 0.5s forwards;}2. 在 Vue 组件中利用动画类
在你的 Vue 模板中，根据组件的数据属性来动态添加动画类：
<template> <div class="container" @click="toggleDiv"> <div v-if="showDiv" :class="slideClass" ref="animatedDiv"> <!-- 动画化的 div 内容 --> </div> </div></template><script>export default { data() { return { showDiv: false, slideClass: 'slide-in-left', // 默认动画 }; }, methods: { toggleDiv() { this.showDiv = !this.showDiv; if (this.showDiv) { this.slideClass = 'slide-in-left'; } else { this.slideClass = 'slide-out-left'; } }, }, mounted() { // 如果须要在初始时显示 div，可以在这里设置 showDiv 为 true },};</script>
在这个示例中，当用户点击容器时，showDiv 的值会切换，从而触发 div 的动画效果。.slide-in-left 和 .slide-out-left 类定义了 div 从左侧滑入和滑出的动画效果。你可以根据须要添加其他方向的动画类和逻辑。
3. 完全的示例以下是一个完全的示例，展示了如何利用 Vue.js 和 CSS 动画来实现 div 在不同方向上的隐蔽和显示：
<template> <div class="container" @click="toggleDiv"> <div v-if="showDiv" :class="slideClass" ref="animatedDiv"> 动画化的 div 内容 </div> </div></template><script>export default { data() { return { showDiv: false, slideClass: 'slide-in-left', // 默认动画 }; }, methods: { toggleDiv() { this.showDiv = !this.showDiv; if (this.showDiv) { this.slideClass = 'slide-in-left'; } else { this.slideClass = 'slide-out-left'; } }, }, mounted() { this.showDiv = true; // 初始时显示 div },};</script><style>/ 定义 CSS 动画关键帧和类... // CSS 文件中定义的动画类 /</style>
在这个示例中，当用户点击页面上的任何位置时，div 会在 slide-in-left 和 slide-out-left 状态之间切换，从而实现向左滑动的效果。你可以根据须要添加其他方向的动画类和逻辑。
