实现纯 CSS 的“展开/收起”动画文本折叠组件

应用 CSS transform + opacity 过渡（注意：height: 0 / max-height 方案存在动画不可控问题，故推荐 scaleY 缩放方案）：

立即学习“前端免费学习笔记（深入）”；

.text-toggle {
  margin: 1.5rem 0;
}

.toggle-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #333;
  transition: color 0.2s;
}

.toggle-summary:hover {
  color: #007bff;
}

.toggle-icon {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* 展开时图标旋转 */
.text-toggle[open] .toggle-icon {
  transform: rotate(180deg);
}

/* 文本展开动画 */
.text-toggle > p {
  margin: 1.25rem 0 0;
  font-family: "Cormorant Garamond", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 33px;
  line-height: 42px;
  width: 80%;
  margin-left: 10%;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  animation: slideIn 0.4s forwards ease-out;
}

@keyframes slideIn {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* 收起时反向动画（需 JS 触发）→ 但原生 details 不支持收起动画，因此我们仅对展开做动画，收起保持快速隐藏（更符合 UX 直觉） */
.text-toggle:not([open]) > p {
  animation: none;
  display: none;
}

⚠️ 注意事项与最佳实践

• 无障碍优先：
  /

  是 WAI-ARIA 推荐的语义化方案，自动暴露 aria-expanded 状态，无需额外 ARIA 标注。
• 图标建议：使用 SVG 替代 Font Awesome 图标，避免字体加载延迟或跨域问题；也可通过伪元素 ::after 动态插入箭头（如 content: "▼";），再配合 transform: rotate() 控制方向。
• 响应式适配：若文本在移动端需更紧凑，默认字号与行高建议用 rem 或 clamp() 动态调整。
• SEO 友好：所有内容保留在 DOM 中（非动态加载），搜索引擎可正常索引全文。
• 兼容性：支持所有现代浏览器（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+），IE 不支持，如需兼容 IE，请回退至 JS 方案。

✅ 总结

该方案以最小技术成本达成高性能、高可访问性与视觉一致性：“展开”有细腻缩放入场动画，“收起”保持即时响应，全程无 JS 依赖，代码精简、维护成本低。对于内容型网站（如个人简介、服务说明、FAQ），是兼顾用户体验与开发效率的理想选择。只需将你的 .qodef-m-text 内容包裹进