折叠面板,展开收起动画效果

<template>
  <div id="app" style="color: black;">
    <button @click="toggle">展开/收起</button>
    <div ref="content" class="content" :style="{ maxHeight: maxHeight }">
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, nextTick } from 'vue';

const isOpen = ref(false);
const maxHeight = ref('0px');
const content = ref(null);

const updateMaxHeight = async () => {
  if (isOpen.value) {
    // 确保DOM更新完成
    await nextTick();
    // 将maxHeight设置为内容实际高度
    maxHeight.value = `${content.value.scrollHeight}px`;
  } else {
    maxHeight.value = '0';
  }
};

// 观察isOpen值变化来更新maxHeight
watch(isOpen, updateMaxHeight);

// 在组件挂载后,考虑初始状态是否展开
onMounted(() => {
  if (isOpen.value) updateMaxHeight();
});

function toggle() {
  isOpen.value = !isOpen.value;
}
</script>

<style scoped>
.content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
</style>
<template>
  <div id="app" style="color: black;">
    <button @click="toggle">展开/收起</button>
    <div ref="content" class="content" :style="{ maxHeight: `${maxHeight}` }">
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
      <p>这是一个可以展开收起的内容区域。这里的内容可以根据实际情况增加或减少,高度会自动适配。</p>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, nextTick } from 'vue';

const isOpen = ref(false);
const maxHeight = ref('0px');
const content = ref(null);


const pxToVw = (pxValue, viewportWidth = 428) => {
  if (!pxValue || !viewportWidth) {
    throw new Error('Both pxValue and viewportWidth are required.');
  }
  // 将像素值转换为视口宽度单位的百分比  
  const vwValue = (pxValue / viewportWidth) * 100;
  return `${vwValue.toFixed(6)}vw`; // 保留五位小数以确保精度  
}
const updateMaxHeight = async () => {
  if (isOpen.value) {
    // 确保DOM更新完成
    await nextTick();
    // 将maxHeight设置为内容实际高度
    maxHeight.value = pxToVw(content.value.scrollHeight)

  } else {
    maxHeight.value = '0';
  }
};

// 观察isOpen值变化来更新maxHeight
watch(isOpen, updateMaxHeight);

// 在组件挂载后,考虑初始状态是否展开
onMounted(() => {
  if (isOpen.value) updateMaxHeight();
});

function toggle() {
  isOpen.value = !isOpen.value;
}
</script>

<style scoped>
.content {
  overflow: hidden;
  /* height: var(--dynamic-height); */
  /* 使用 CSS 变量来设置高度 */
  transition: max-height 0.3s ease;
  /* transition: max-height 0.3s ease; */
}
</style>

第一个是正常处理

第二是项目中 使用postcss-px-to-viewport 插件  px转换vw处理

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
折叠面板收起展开是相互影响的。当一个面板展开时,其他面板会被自动收起,只有一个面板可以处于展开状态。这是通过添加和移除相应的 CSS 类来实现的。当一个面板展开时,会添加一个表示展开状态的 CSS 类,而其他面板则会被移除这个 CSS 类,从而实现展开收起效果。引用中的代码片段是用来获取当前已经展开面板的元素节点的。如果存在已经展开面板(即变量`collapse`存在),并且当前操作的面板没有包含 CSS 类名"keep-unfold"(即没有设置保持展开的状态),那么可以执行对应的收起操作。这样就保证了只有一个面板可以处于展开状态,而其他面板会被收起。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vuejs实现折叠面板展开收缩动画效果](https://download.csdn.net/download/weixin_38697557/12952697)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [accordion折叠面板 怎么让多个折叠面板点击收缩互不影响,目前点击其中一个会让其他的收缩起来,怎么解决?](https://blog.csdn.net/weixin_39699912/article/details/117758025)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值