揭秘uni-app折叠面板折叠展开动画的本质，打造交互式视觉盛宴

前端

2023-03-15 13:25:17

折叠面板：为你的 uni-app 应用增添交互性

什么是折叠面板？

折叠面板是一种交互式用户界面元素，允许你隐藏或显示内容，只需点击一次。它们非常适合组织和呈现大量信息，同时保持界面整洁有序。

折叠面板的动画原理

折叠面板动画的原理基于 CSS3 中的 transition 属性。transition 属性允许你为元素的属性设置一个过渡效果，从而实现平滑的动画效果。

如何实现折叠面板折叠/展开动画

设置 transition 属性

首先，你需要为折叠面板设置 transition 属性。transition 属性的格式如下：

transition: property duration timing-function delay;

property：要设置过渡效果的属性，这里我们设置为 height。
duration：过渡效果的持续时间，单位为秒，这里我们设置为 0.4 秒。
timing-function：过渡效果的函数，这里我们使用默认值 ease，表示缓入缓出。
delay：过渡效果的延迟时间，单位为秒，这里我们设置为 0。

使动画生效

设置好 transition 属性后，我们还需要使动画生效。动画生效的方式有两种：

动态改变折叠面板的高度

你可以通过动态改变折叠面板的高度来触发动画。例如，你可以使用 Vue.js 的 v-show 指令来控制折叠面板的显示和隐藏。当折叠面板显示时，你可以设置其高度为 0；当折叠面板隐藏时，你可以设置其高度为折叠面板内容的高度。
在折叠面板里面再用一层 view 把内容包起来，然后写代码动态获取这个 view 的高度

如果你的折叠面板高度是不确定的，那么你可以在折叠面板里面再用一层 view 把内容包起来，然后写代码动态获取这个 view 的高度。然后，你可以根据获取的高度来设置折叠面板的高度。

示例代码

<template>
  <view class="container">
    <view class="panel" @click="toggle">
      <view class="panel-header">折叠面板</view>
      <view class="panel-content" v-show="show">
        <view>内容 1</view>
        <view>内容 2</view>
        <view>内容 3</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.panel {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  transition: height 0.4s ease;
}

.panel-header {
  width: 100%;
  height: 50px;
  background-color: #f5f5f5;
  padding: 10px;
  cursor: pointer;
}

.panel-content {
  width: 100%;
  height: 0;
  overflow: hidden;
}
</style>