Vuejs高度的改变动画探索：折叠面板Collapse组件的优秀实现方案

使用过CSS transition属性的童鞋们应该都清楚，当元素在过渡开始或者结束时的高度为auto时，动画是不生效的;那么如何才能实现元素高度的改变动画效果呢?本篇文章将为大家提供一个基于Vue3的非常简洁的解决方案。

为周至等地区用户提供了全套网页设计制作服务，及周至网站建设行业解决方案。主营业务为网站制作、成都网站制作、周至网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

要实现高度的改变动画，我们需要在动画进行之前为元素设置准确的高度。

当元素由可见变为隐藏状态时，我们需要先获取元素的计算高度，将其设置到style属性上，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为0，这样高度的改变动画就会正常进行。

当元素由隐藏变为可见状态时，我们需要先将高度设置为auto，然后获取元素的计算高度，再将高度设置为0，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为计算高度，这样高度的改变动画就会正常进行。

现在，根据以上实现原理分析，我们创建一个高度的改变动画通用组件CollapseTransition.vue。该组件非常简单，仅需30多行代码。我几乎每行代码都有注释，大家应该能看懂吧?

以上就是实现高度的改变动画的通用组件源码，童鞋们理解了吗?是不是非常简单?现在，我们实现折叠面板组件。使用过element-ui这样的UI库的童鞋们应该都知道，折叠面板是由两个组件折叠面板Collapse和折叠面板项CollapseItem组合而成;

现在，我们先实现CollapseItem.vue组件。为了节省篇幅，我将源码中的空行全部去掉了，缩进比较规范，自认为可读性还行;源码如下，一共30多行，我直接在源码中添加了注释，就不过多解释了。

这是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多行，大家理解起来应该很轻松，我就直接在源码里添加注释作为讲解了。

以上就是折叠面板组件的实现。包括折叠动画组件，一共仅需不到150行代码，是不是非常简单?

网站标题：Vuejs高度的改变动画探索：折叠面板Collapse组件的优秀实现方案
分享路径：http://www.gawzjz.com/qtweb/news33/175733.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联