Posts

Vue 3 Transition组件提供了8个JavaScript钩子事件，让你可以在动画的不同阶段执行JS代码。本文详解每个钩子的触发时机、:css=“false"的用法、以及如何配合GSAP实现CSS做不到的复杂动 …

Vue 3 Transition组件支持自定义过渡类名，让你可以直接用Animate.css等第三方动画库的类名。本文讲解6个自定义类名prop、Animate.css集成方法、同时使用transition和animation时type属性 …

Vue 3的Transition组件是内置的动画利器，本文从Transition组件的基本概念讲起，搞清楚它什么时候触发、6个CSS过渡类名分别干啥、命名过渡怎么用、CSS transition和CSS animation两种方式的区别。

理论学完了，来点实际的！模态框组件怎么配合Transition做动画？通知栏怎么实现堆叠和自动消失？全屏遮罩怎么防止滚动穿透？三个完整实战案例，拿去直接用。

Teleport不只是传送到body那么简单。disabled让你按需开关传送，多个Teleport可以共享同一个目标容器按顺序排列，defer prop解决目标元素晚于Teleport渲染的时序问题。三个进阶玩法一次搞定。

Teleport的to属性不只是写个body那么简单，CSS选择器、DOM元素对象都能用，但每种写法都有坑。目标元素不存在会报错，动态切换目标要小心闪烁，SSR场景更是要格外注意。