Vue.js 动画技巧:实现 DIV 元素的平滑隐藏与显示

发布网友发布时间：2024-08-17 08:33

共1个回答

热心网友时间：2024-08-22 22:06

在 Vue.js 中，要让 DIV 元素实现平滑的隐藏和显示，你可以利用 CSS 动画和 Vue 的过渡系统。下面是一个使用 CSS 动画的实例，它实现了元素的淡入淡出效果：

首先，为你的组件定义一个名为“fade-in-out”的 CSS 类，设置一个 0.5 秒的平滑过渡时间：

...

然后，为进入（显示）状态添加一个“fade-in-out-enter”类，使其初始透明度为0：

...

当元素开始进入时，应用“fade-in-out-enter-active”类，使元素在0.5秒内逐渐变为完全可见：

...

对于离开（隐藏）状态，使用“fade-in-out-leave-active”类，元素在0.5秒内透明度降为0：

...

最后，当元素完全离开屏幕时，添加“fade-in-out-leave-to”类，确保其透明度为0：

...

通过这些 CSS 类和 Vue 的过渡绑定，你可以轻松实现 DIV 元素的平滑隐藏与显示效果。只需在需要的地方添加或移除这些类，即可控制动画的执行。