前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载导读QSlideTransition 是 Quasar FrameworkVue 2/3提供的一个 renderless 过渡组件用于让被包裹的单个 DOM 元素或组件在显示/隐藏状态切换时以垂直方向向上或向下平滑滑动与v-show、v-if配合使用即可获得类似折叠面板的展开收起动效。读完本文你将掌握 QSlideTransition 的完整 APIappear、duration、show/hide事件、真实使用示例以及它在底层如何通过Web Animation calc-size()与测量式 CSS 过渡双引擎实现无卡顿的高度动画并了解其在 QExpansionItem、QStep、QTree 等内置组件中的复用方式与无障碍注意事项。QSlideTransition 是什么根据组件官方文档 slide-transition.md 的定义QSlideTransition 会根据元素的可见性将其向上或向下滑动——它适用于单个元素上的v-show和v-if用法与 Vue 内置的Transition组件类似唯一的区别是它不是 group transition即一次只作用于一个 DOM 元素或组件而不是列表的批量过渡。从源码实现看QSlideTransition.js 本身正是基于 Vue 的Transition组件封装的export default /*#__PURE__*/ createComponent({ name: QSlideTransition, props: { appear: Boolean, duration: { type: Number, default: 300 } }, emits: [show, hide], setup(props, { slots, emit }) { const { onEnter, onLeave } useSlideTransition(() props.duration, emit) return () h( Transition, { css: false, // 不使用 CSS 过渡类动画完全由 JS 驱动 appear: props.appear, onEnter, onLeave }, slots.default ) } })关键在于css: falseVue 的Transition在此模式下不会注入任何过渡 CSS 类名动画的进入/离开钩子onEnter/onLeave由 QSlideTransition 通过useSlideTransition组合式函数自行实现从而实现对动画过程的完全控制。快速上手一个可复制的完整示例仓库中提供的官方示例位于 docs/src/examples/QSlideTransition/Basic.vue用一个开关切换图片的显示与隐藏即可看到上下滑动效果template div classq-pa-md stylemax-width: 500px q-toggle v-modelvisible labelVisible image classq-mb-md / q-slide-transition div v-showvisible img altQuasar classresponsive srchttps://cdn.quasar.dev/img/quasar.jpg / /div /q-slide-transition /div /template script setup import { ref } from vue const visible ref(true) /script几个关键点v-show负责控制可见性QSlideTransition只负责包装动画——两者结合切换visible时元素的高度会从 0 平滑展开、再平滑收起。同样适用于v-if当元素被销毁重建时动画会先结算旧元素、再让新元素重新播放进入动画底层对两种场景的处理略有差异下文会详细说明。不依赖图片路径时直接用div等任意内容替换img即可动画逻辑完全一致。Props 完整说明根据组件 API 定义文件 QSlideTransition.json 和源码QSlideTransition 仅有两个 propsappearBoolean默认falseIf set to true, the transition will be applied on the initial render.设为true时过渡动画会在组件初次渲染时也被应用——即页面加载时元素不是直接出现而是执行一次展开滑动。默认false表示初次渲染不播动画。相关行为在 QSlideTransition.test.js 中有对应测试appear: true挂载后即触发一次show事件。durationNumber默认300Duration (in milliseconds) of the slide animation; use 0 to disable the animation and toggle instantly.滑动动画的持续时间单位为毫秒默认值300ms。传入0可以完全禁用动画让显隐切换瞬时完成。测试 QSlideTransition.test.js 验证了duration: 0的行为立即结算、不进行布局读取、不创建任何定时器show/hide事件同步触发。注意 duration 可以传任意正整数实际动画时长会被原样用于底层动画调度见下文双引擎中的getDuration()调用。事件EventsQSlideTransition 对外只发出两个事件见 QSlideTransition.json 中的extends定义分别继承自通用的after-show/after-hide语义事件触发时机show滑动展开动画结束后触发after-show语义hide滑动收起动画结束后触发after-hide语义也就是说这两个事件不是在动画开始时触发而是在动画完成、样式已清理后触发。测试 QSlideTransition.test.js 确认展开完成后emitted(show)为[[]]收起完成后emitted(hide)为[[]]。另外有一个细节值得注意如果动画在中途被反向打断并最终回到了起始状态例如展开到一半又立刻收起两个事件都不会触发——测试emits nothing when an interrupted slide returns to its origin明确验证了这一行为这与以最终可见状态为准的直觉一致。插槽Slots组件只有一个default插槽即需要被滑动包裹的内容见 QSlideTransition.json。注意该组件是 **renderless无渲染**的——它不产生任何自己的 DOM 结构只负责给子元素附加动画因此不会引入多余的包裹节点也不会破坏原有布局语义。测试 QSlideTransition.test.js 验证了默认插槽内容能够被正确渲染。底层原理双引擎实现的高度滑动QSlideTransition 的动画逻辑集中在组合式函数 use-slide-transition.js 中。它的核心设计是根据浏览器能力在两种动画引擎之间自动切换export const cssAutoHeightSupport __QUASAR_SSR_SERVER__ || (typeof CSS ! undefined CSS.supports(height, contentHeight)) export default cssAutoHeightSupport ? createNativeSlide : createMeasuredSlide其中contentHeight calc-size(auto, size)即先检测浏览器是否支持 CSScalc-size()语法该特性在 import 时一次性解析typeof守卫覆盖了无 DOM 的 SSR 导入场景。引擎一原生 Web Animation支持calc-size()的浏览器如 Chromium支持calc-size(auto, size)的引擎会采用 Web Animation API关键帧定义如下const showKeyframes [{ height: 0px }, { height: contentHeight }] const hideKeyframes [{ height: contentHeight }, { height: 0px }]此路径的收益在源码注释中描述得很清楚零 JS 测量不需要强制布局forced layout去读取内容高度高度实时跟踪动画过程中如果内容高度变化例如图片加载完成动画目标会跟随不会出现截断中途反向同一元素上的展开被收起打断时直接调用animation.reverse()反向播放同一动画视觉上无缝衔接。实现上进入/离开时调用el.animate(keyframes, { duration, easing, fill: forwards })easing固定为cubic-bezier(.25, .8, .50, 1)接近 ease-out 的缓动曲线动画期间给元素设置overflowY: hidden防止内容溢出同时用setTimeout(animation.onfinish, duration * 1.1)作为兜底计时器避免finish事件在极端情况下丢失。引擎二测量式 CSS 过渡回退路径在不支持calc-size()的浏览器如 Firefox、Safari中关键帧会被当作无效值丢弃此时走createMeasuredSlide先读取el.scrollHeight强制一次布局再把高度作为内联样式写入驱动一次 CSStransitionel.style.transition height ${getDuration()}ms ${easing} return el.scrollHeight // 读取即强制样式刷新避免高度瞬间跳变onLeave时把高度过渡到 0onEnter时过渡回scrollHeight并监听transitionend事件 duration * 1.1兜底定时器完成清理。结束时会统一清空height、transition、overflowY等内联样式测试中的expectSettled断言了这一点。两种引擎共有的行为保证零时长立即结算duration 0时不读取布局、不创建定时器直接完成并触发事件打断恢复动画中被反向切换时若仍是同一元素则原地反转若是v-if重建的新元素则先结算旧动画再让新元素开始卸载清理onBeforeUnmount中会结算未完成的动画避免内存泄漏。双引擎的测试覆盖在 use-slide-transition.test.js 与 QSlideTransition.test.js 中后者通过 mock 分别以Web Animation与measured transition两种模式跑同一组断言保证两条路径行为一致。不止于此其他内置组件如何复用同一套滑动逻辑useSlideTransition是 Quasar 内部的私有组合式函数位于composables/private.use-slide-transition/目录从源码引用关系看它被以下内置组件共享QExpansionItem.js展开项组件。它把自己的duration传入useSlideTransition并把滑动的结束事件映射为自身的afterShow/afterHide见 QExpansionItem.js同时用contentHidden在收起动画结束后把内容绑定为display: none实现与 QSlideTransition 一致但更精细的显隐控制QStep步骤条组件与 QTree树组件同样引入该函数分别用于步骤内容与树节点展开的垂直滑动。这意味着你直接使用 QSlideTransition 时的动画手感与 Quasar 内置组件内部使用的完全一致——它们是同一套经过测试的底层实现。无障碍Accessibility注意事项组件文档在 slide-transition.md 中特别标注了v2.25引入的无障碍说明QSlideTransition 是renderless的且只动画子元素的高度因此它自身没有任何 ARIA 表面不产生语义节点无障碍树无需为其做特殊处理动画由 JavaScript 驱动支持calc-size()的浏览器走 Web Animation其余走内联 CSS 过渡因此动画会无视用户的prefers-reduced-motion设置照常播放对动效敏感的应用建议在检测到用户开启减少动态效果时跳过这类折叠动画——最简单的做法是监听prefers-reduced-motion媒体查询命中时将duration设为0即可利用本文提到的零时长立即结算路径实现瞬时显隐。Quasar 的通用无障碍主题文档 accessibility.md 中也提到了这一组件的相关说明可一并参考。小结何时使用 QSlideTransition需要一个单元素的展开/收起滑动效果手风琴式内容、图片显隐、详情面板等且希望动画由框架封装、开箱即用已经使用v-show或v-if控制显隐只是想给显隐过程加上垂直滑动——无需改造成 CSS 类名的写法需要监听show/hide事件在动画结束后执行后续逻辑如滚动定位、统计埋点。需要多元素列表的批量过渡时则应选用 Vue 的TransitionGroup或 Quasar 官方过渡方案 transitions文档中声明的相关页面之一因为 QSlideTransition 明确不提供 group 语义。掌握上述 API 与双引擎原理后你就能在自己的 Quasar 项目中精准控制每一个折叠动画的时长、初始渲染行为与结束回调。赞分享前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载相关推荐10分钟跑通微信公众号RSS10分钟跑通微信公众号RSS 每天要翻好几个微信才能看完关注的技术公众号更新换台设备就得从头再来一遍。wewe rss 做的事情很直接基于微信读书接口把微后端前端2025年OCSF Schema重大更新AI操作支持与自动化PR审查机制2025年OCSF Schema重大更新AI操作支持与自动化PR审查机制 OCSF Schema作为开源安全事件格式的行业标准在2025年迎来了版本更新当vue-hackernews-2.0中的条件渲染v-if与v-show性能对比vue hackernews 2.0中的条件渲染v if与v show性能对比 在Vue.js开发中条件渲染是构建动态界面的核心能力。vue hackern示例工程前端SSR创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Quasar QSlideTransition 组件实战指南：基于 v-show / v-if 的上下滑动过渡
前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载导读QSlideTransition 是 Quasar FrameworkVue 2/3提供的一个 renderless 过渡组件用于让被包裹的单个 DOM 元素或组件在显示/隐藏状态切换时以垂直方向向上或向下平滑滑动与v-show、v-if配合使用即可获得类似折叠面板的展开收起动效。读完本文你将掌握 QSlideTransition 的完整 APIappear、duration、show/hide事件、真实使用示例以及它在底层如何通过Web Animation calc-size()与测量式 CSS 过渡双引擎实现无卡顿的高度动画并了解其在 QExpansionItem、QStep、QTree 等内置组件中的复用方式与无障碍注意事项。QSlideTransition 是什么根据组件官方文档 slide-transition.md 的定义QSlideTransition 会根据元素的可见性将其向上或向下滑动——它适用于单个元素上的v-show和v-if用法与 Vue 内置的Transition组件类似唯一的区别是它不是 group transition即一次只作用于一个 DOM 元素或组件而不是列表的批量过渡。从源码实现看QSlideTransition.js 本身正是基于 Vue 的Transition组件封装的export default /*#__PURE__*/ createComponent({ name: QSlideTransition, props: { appear: Boolean, duration: { type: Number, default: 300 } }, emits: [show, hide], setup(props, { slots, emit }) { const { onEnter, onLeave } useSlideTransition(() props.duration, emit) return () h( Transition, { css: false, // 不使用 CSS 过渡类动画完全由 JS 驱动 appear: props.appear, onEnter, onLeave }, slots.default ) } })关键在于css: falseVue 的Transition在此模式下不会注入任何过渡 CSS 类名动画的进入/离开钩子onEnter/onLeave由 QSlideTransition 通过useSlideTransition组合式函数自行实现从而实现对动画过程的完全控制。快速上手一个可复制的完整示例仓库中提供的官方示例位于 docs/src/examples/QSlideTransition/Basic.vue用一个开关切换图片的显示与隐藏即可看到上下滑动效果template div classq-pa-md stylemax-width: 500px q-toggle v-modelvisible labelVisible image classq-mb-md / q-slide-transition div v-showvisible img altQuasar classresponsive srchttps://cdn.quasar.dev/img/quasar.jpg / /div /q-slide-transition /div /template script setup import { ref } from vue const visible ref(true) /script几个关键点v-show负责控制可见性QSlideTransition只负责包装动画——两者结合切换visible时元素的高度会从 0 平滑展开、再平滑收起。同样适用于v-if当元素被销毁重建时动画会先结算旧元素、再让新元素重新播放进入动画底层对两种场景的处理略有差异下文会详细说明。不依赖图片路径时直接用div等任意内容替换img即可动画逻辑完全一致。Props 完整说明根据组件 API 定义文件 QSlideTransition.json 和源码QSlideTransition 仅有两个 propsappearBoolean默认falseIf set to true, the transition will be applied on the initial render.设为true时过渡动画会在组件初次渲染时也被应用——即页面加载时元素不是直接出现而是执行一次展开滑动。默认false表示初次渲染不播动画。相关行为在 QSlideTransition.test.js 中有对应测试appear: true挂载后即触发一次show事件。durationNumber默认300Duration (in milliseconds) of the slide animation; use 0 to disable the animation and toggle instantly.滑动动画的持续时间单位为毫秒默认值300ms。传入0可以完全禁用动画让显隐切换瞬时完成。测试 QSlideTransition.test.js 验证了duration: 0的行为立即结算、不进行布局读取、不创建任何定时器show/hide事件同步触发。注意 duration 可以传任意正整数实际动画时长会被原样用于底层动画调度见下文双引擎中的getDuration()调用。事件EventsQSlideTransition 对外只发出两个事件见 QSlideTransition.json 中的extends定义分别继承自通用的after-show/after-hide语义事件触发时机show滑动展开动画结束后触发after-show语义hide滑动收起动画结束后触发after-hide语义也就是说这两个事件不是在动画开始时触发而是在动画完成、样式已清理后触发。测试 QSlideTransition.test.js 确认展开完成后emitted(show)为[[]]收起完成后emitted(hide)为[[]]。另外有一个细节值得注意如果动画在中途被反向打断并最终回到了起始状态例如展开到一半又立刻收起两个事件都不会触发——测试emits nothing when an interrupted slide returns to its origin明确验证了这一行为这与以最终可见状态为准的直觉一致。插槽Slots组件只有一个default插槽即需要被滑动包裹的内容见 QSlideTransition.json。注意该组件是 **renderless无渲染**的——它不产生任何自己的 DOM 结构只负责给子元素附加动画因此不会引入多余的包裹节点也不会破坏原有布局语义。测试 QSlideTransition.test.js 验证了默认插槽内容能够被正确渲染。底层原理双引擎实现的高度滑动QSlideTransition 的动画逻辑集中在组合式函数 use-slide-transition.js 中。它的核心设计是根据浏览器能力在两种动画引擎之间自动切换export const cssAutoHeightSupport __QUASAR_SSR_SERVER__ || (typeof CSS ! undefined CSS.supports(height, contentHeight)) export default cssAutoHeightSupport ? createNativeSlide : createMeasuredSlide其中contentHeight calc-size(auto, size)即先检测浏览器是否支持 CSScalc-size()语法该特性在 import 时一次性解析typeof守卫覆盖了无 DOM 的 SSR 导入场景。引擎一原生 Web Animation支持calc-size()的浏览器如 Chromium支持calc-size(auto, size)的引擎会采用 Web Animation API关键帧定义如下const showKeyframes [{ height: 0px }, { height: contentHeight }] const hideKeyframes [{ height: contentHeight }, { height: 0px }]此路径的收益在源码注释中描述得很清楚零 JS 测量不需要强制布局forced layout去读取内容高度高度实时跟踪动画过程中如果内容高度变化例如图片加载完成动画目标会跟随不会出现截断中途反向同一元素上的展开被收起打断时直接调用animation.reverse()反向播放同一动画视觉上无缝衔接。实现上进入/离开时调用el.animate(keyframes, { duration, easing, fill: forwards })easing固定为cubic-bezier(.25, .8, .50, 1)接近 ease-out 的缓动曲线动画期间给元素设置overflowY: hidden防止内容溢出同时用setTimeout(animation.onfinish, duration * 1.1)作为兜底计时器避免finish事件在极端情况下丢失。引擎二测量式 CSS 过渡回退路径在不支持calc-size()的浏览器如 Firefox、Safari中关键帧会被当作无效值丢弃此时走createMeasuredSlide先读取el.scrollHeight强制一次布局再把高度作为内联样式写入驱动一次 CSStransitionel.style.transition height ${getDuration()}ms ${easing} return el.scrollHeight // 读取即强制样式刷新避免高度瞬间跳变onLeave时把高度过渡到 0onEnter时过渡回scrollHeight并监听transitionend事件 duration * 1.1兜底定时器完成清理。结束时会统一清空height、transition、overflowY等内联样式测试中的expectSettled断言了这一点。两种引擎共有的行为保证零时长立即结算duration 0时不读取布局、不创建定时器直接完成并触发事件打断恢复动画中被反向切换时若仍是同一元素则原地反转若是v-if重建的新元素则先结算旧动画再让新元素开始卸载清理onBeforeUnmount中会结算未完成的动画避免内存泄漏。双引擎的测试覆盖在 use-slide-transition.test.js 与 QSlideTransition.test.js 中后者通过 mock 分别以Web Animation与measured transition两种模式跑同一组断言保证两条路径行为一致。不止于此其他内置组件如何复用同一套滑动逻辑useSlideTransition是 Quasar 内部的私有组合式函数位于composables/private.use-slide-transition/目录从源码引用关系看它被以下内置组件共享QExpansionItem.js展开项组件。它把自己的duration传入useSlideTransition并把滑动的结束事件映射为自身的afterShow/afterHide见 QExpansionItem.js同时用contentHidden在收起动画结束后把内容绑定为display: none实现与 QSlideTransition 一致但更精细的显隐控制QStep步骤条组件与 QTree树组件同样引入该函数分别用于步骤内容与树节点展开的垂直滑动。这意味着你直接使用 QSlideTransition 时的动画手感与 Quasar 内置组件内部使用的完全一致——它们是同一套经过测试的底层实现。无障碍Accessibility注意事项组件文档在 slide-transition.md 中特别标注了v2.25引入的无障碍说明QSlideTransition 是renderless的且只动画子元素的高度因此它自身没有任何 ARIA 表面不产生语义节点无障碍树无需为其做特殊处理动画由 JavaScript 驱动支持calc-size()的浏览器走 Web Animation其余走内联 CSS 过渡因此动画会无视用户的prefers-reduced-motion设置照常播放对动效敏感的应用建议在检测到用户开启减少动态效果时跳过这类折叠动画——最简单的做法是监听prefers-reduced-motion媒体查询命中时将duration设为0即可利用本文提到的零时长立即结算路径实现瞬时显隐。Quasar 的通用无障碍主题文档 accessibility.md 中也提到了这一组件的相关说明可一并参考。小结何时使用 QSlideTransition需要一个单元素的展开/收起滑动效果手风琴式内容、图片显隐、详情面板等且希望动画由框架封装、开箱即用已经使用v-show或v-if控制显隐只是想给显隐过程加上垂直滑动——无需改造成 CSS 类名的写法需要监听show/hide事件在动画结束后执行后续逻辑如滚动定位、统计埋点。需要多元素列表的批量过渡时则应选用 Vue 的TransitionGroup或 Quasar 官方过渡方案 transitions文档中声明的相关页面之一因为 QSlideTransition 明确不提供 group 语义。掌握上述 API 与双引擎原理后你就能在自己的 Quasar 项目中精准控制每一个折叠动画的时长、初始渲染行为与结束回调。赞分享前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载相关推荐10分钟跑通微信公众号RSS10分钟跑通微信公众号RSS 每天要翻好几个微信才能看完关注的技术公众号更新换台设备就得从头再来一遍。wewe rss 做的事情很直接基于微信读书接口把微后端前端2025年OCSF Schema重大更新AI操作支持与自动化PR审查机制2025年OCSF Schema重大更新AI操作支持与自动化PR审查机制 OCSF Schema作为开源安全事件格式的行业标准在2025年迎来了版本更新当vue-hackernews-2.0中的条件渲染v-if与v-show性能对比vue hackernews 2.0中的条件渲染v if与v show性能对比 在Vue.js开发中条件渲染是构建动态界面的核心能力。vue hackern示例工程前端SSR创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考