提示：文末有全部源码。 直接CTRL+C拿走就可以了，不用谢我； 当然，我还是建议大家自学写。
使用过CSS过渡属性的童鞋应该知道，当过渡开始或结束时元素的高度为auto时，动画不生效； 那么改变元素高度的动画效果如何实现呢？ 本文将为您提供一个基于Vue3的非常简单的解决方案。
要实现高度变化动画，我们需要在动画发生之前设置元素的准确高度。
当一个元素从可见变为隐藏时，我们需要先获取该元素的估计高度，将其设置到style属性中，然后执行触发浏览器渲染引擎重绘的动作，然后将高度设置为0，所以高度 对动画的任何更改都会正常进行。
当元素从隐藏变为可见时，我们需要先将高度设置为auto，然后获取元素的估计高度，然后将高度设置为0，然后执行触发浏览器渲染引擎重绘的动作，然后将高度设置为估计高度，以便高度变化的动画正常工作。
现在，基于上述实现原理的分析，我们创建一个高级变化动画通用组件CollapseTransition.vue。 该组件非常简单，只需要 30 多行代码。 我几乎每一行代码都有注释elementui加动画，大家应该都能看懂吧？
defineProps({ visible: Boolean })
const listeners = {
// 元素由隐藏变为可见
onEnter (/** @type {HTMLElement} */ el) {
el.style.height = 'auto' // 将高度设为auto，是为了获取该元素的计算高度
const endHeight = window.getComputedStyle(el).height // 计算高度
el.style.height = '0px' // 将高度再设置为0
el.offsetHeight // 强制重绘，重绘后再改变高度才会产生动画
el.style.height = endHeight // 设置为计算高度
},
onAfterEnter (/** @type {HTMLElement} */ el) {
el.style.height = null // 过渡进入之后，将高度恢复为null
},
// 元素由可见变为隐藏
onLeave (/** @type {HTMLElement} */ el) {
el.style.height = window.getComputedStyle(el).height // 计算高度
el.offsetHeight // 强制重绘，重绘后再改变高度才会产生动画
el.style.height = '0px' // 将高度设置为0
},
onAfterLeave (/** @type {HTMLElement} */ el) {
el.style.height = null // 过渡离开之后，将高度恢复为null
}
}
.x-collapse-transition {
overflow: hidden;
transition: height .22s ease-in-out;
}
以上是实现动画高层变化的常用组件的源码。 童鞋们明白吗？ 是不是很简单呢？ 现在，我们实现手风琴组件。 用过element-ui等UI库的童鞋应该知道，折叠面板是由两个组件组成，折叠面板Collapse和折叠面板项CollapseItem；
现在，我们首先实现 CollapseItem.vue 组件。 为了节省空间，我删除了源代码中所有的空白行。 缩进比较规范elementui加动画，我觉得可读性很好。 源码如下，共30多行。 我直接在源码中添加了注释，就不做过多解释了。 。
{{ title }}
import { computed, inject } from 'vue'
import { COLLAPSE_INJECT_KEY } from '../../constants' // 当它是个字符串常量就行
import { N, S, B } from '../../types' // N: Number, S: String, B: Boolean
import { genKey } from '../../utils' // 生成唯一性的数值key，之前的文章中有源码
import XCollapseTransition from './CollapseTransition.vue' // 折叠动画组件
const props = defineProps({
name: [S, N],
title: S,
disabled: B
})
const collapse = inject(COLLAPSE_INJECT_KEY, '') // 注入折叠面板组件提供的一些属性和方法
const cls = 'x-collapse-item'
const idKey = computed(() => props.name || genKey()) // 如果没提供name，我们生成一个key
const isActive = computed(() => collapse.includes(idKey.value)) // 是否展开状态
function onToggle () { // 内容可见时隐藏，隐藏时可见
collapse.updateModel(idKey.value)
}
这是 CollapseItem.vue 组件的样式。
@import './common/var.scss';
.x-collapse-item {
font-size: 13px;
background-color: #fff;
color: $--color-text-primary;
border-bottom: 1px solid $--border-color-lighter;
&:first-child {
border-top: 1px solid $--border-color-lighter;
}
&_header {
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
cursor: pointer;
}
&_content {
line-height: 1.8;
padding-bottom: 25px;
}
&_arrow {
margin-right: 8px;
transition: transform .2s;
&.is-active {
transform: rotate(90deg);
}
}
}现在，我们实现 Collapse.vue 组件。 该组件仍然只有30多行，应该很容易让大家理解，所以我会直接在源码中添加注释作为解释；
import { provide, reactive, ref, watch } from 'vue'
import { COLLAPSE_INJECT_KEY } from '../../constants' // 一个字符串常量
import { S, B, A } from '../../types' // 参看CollapseItem组件
const props = defineProps({
modelValue: [S, A], // Vue3使用modelValue取代了Vue2中的value
accordion: B // 是否手风琴模式，手风琴模式只能有1个面板项是展开状态
})
const emit = defineEmits(['update:modelValue', 'change'])
function emitValue (v) {
emit('update:modelValue', v) // 与props.modelValue结合实现双向数据绑定
emit('change', v)
}
const model = ref(props.modelValue)
watch(() => props.modelValue, v => model.value = v)
provide(COLLAPSE_INJECT_KEY, { // 提供2个方法用于注入子组件，给子组件调用
includes (v) { // 根据面板的key，判断是否包含该面板项
return props.accordion ? model.value === v : (model.value || []).includes(v)
},
updateModel (v) { // 更新面板项的内容折叠和展开状态
const { value } = model
if (props.accordion) {
model.value = value === v ? null : v
emitValue(model.value)
} else {
if (!value) model.value = []
const index = model.value.indexOf(v)
index > -1 ? model.value.splice(index, 1) : model.value.push(v)
emitValue(model.value)
}
}
})
以上就是折叠面板组件的实现。 包括折叠动画组件，只需要不到150行代码，是不是很简单？ 童鞋们明白了吗？ 不管有什么疑问童鞋都可以来问我。 谢谢阅读！
发表评论