恪愚 2022-08-29 14:30 采纳率: 13.3%
浏览 48

tab切换时css高度如何增加过渡/动画效果？

img

请问下各位带佬像这种tab切换的时候怎么让高度变化有动画效果？
想不出来～
我一开始想的是max-height但是我的结构是v-for循环动态替换数据（vue）。因为考虑到后面可能还会增加，如果用平铺+v-if的方法的话改动维护太麻烦。

  • 写回答

3条回答 默认 最新

  • N_OKIA 2022-08-29 14:44
    关注

    建议使用https://greensock.com/ 这个库

    评论

报告相同问题？

  • HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
    2020-09-24 20:02
    【HTML5+CSS3 实现灵动的动画TAB切换效果】是一种常见的前端交互设计，这篇文章提供了一个DEMO，展示了如何利用这两种技术创建具有动画效果的标签页切换。在HTML5中，我们通常使用`<div>`、`<ul>`和`<li>`等元素构建...
  • 纯css半圆角tab标签切换代码
    2020-06-10 01:28
    在Tab切换中，`:hover`通常用于鼠标悬停时的效果，`:active`表示元素被按下或触摸的状态，`:focus`则用于元素获得键盘焦点的情况。 3. **定位和布局**：CSS的定位技术，如`position`（静态、相对、绝对、固定），...
  • CSS3选项动画切换效果.zip
    2022-11-17 21:18
    在实现选项卡切换时，jQuery的`.click()`事件可以监听用户点击，`.show()`和`.hide()`方法可以控制元素的显示和隐藏，配合CSS3的过渡效果，可以实现平滑的切换。 HTML5的`data-*`属性可以用来存储自定义数据，这...
  • 【css】tab动态切换按钮滑动效果
    2025-02-18 16:25
    爱吃水果和蔬菜丫的博客 【代码】【css】tab动态切换按钮滑动效果。
  • jquery实现有过渡效果的tab切换
    2020-10-15 03:08
    总结来说，这个实例展示了如何利用 jQuery 和 CSS 过渡效果来创建一个动态的 Tab 切换组件。通过理解这个实例，开发者可以灵活地应用到自己的项目中，或者作为基础进一步扩展功能，例如添加键盘导航、自动轮播、触摸...
  • css：transition tab切换 动态滑动效果
    2023-01-12 21:00
    青衫折扇的博客 【代码】css：transition tab切换 动态滑动效果。
  • CSS进阶探索：动画与过渡效果
    2024-07-23 11:30
    2301_79375313的博客 在掌握了CSS的基础知识后，进一步探索CSS的动画与过渡效果，可以让你的网页更加生动有趣。动画和过渡不仅可以增强用户的视觉体验，还能有效传达信息，提升交互的流畅性。本文将带你深入了解CSS动画与过渡的奥秘，让...
  • 又一款强大的竖向tab切换焦点图效果
    2020-06-09 12:55
    在网页设计中，"竖向tab切换焦点图效果"是一种常见的交互设计元素，它能够提升用户体验，使用户更直观地浏览和操作网站内容。本文将深入探讨这一效果的实现原理、设计要点以及优化技巧。 首先，理解“竖向tab切换”...
  • DOMTab-通过CSS和DOMscripting进行tab标签栏切换效果.zip
    2022-11-02 23:44
    同时，CSS3还提供了丰富的选择器和过渡效果，比如`:hover`、`:active`、`:focus`来实现鼠标悬停、点击和聚焦时的样式变化，以及`transition`和`animation`来添加平滑的动画效果，增强用户体验。 DOM（Document ...
  • 自适应宽度高度的tab标签文字切换效果
    2020-06-10 00:27
    在网页设计中，"自适应宽度高度的tab标签文字切换效果"是一种常见的交互设计元素，它使得用户可以方便地在不同的内容区域之间切换，而这些内容区域通常被组织成一个可选择的标签条。这种设计既提升了用户体验，又...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 8月29日