递归实现的导航树用transition-group加动画效果(开合)

最新推荐文章于 2022-11-03 19:25:42 发布

Ideaing~

最新推荐文章于 2022-11-03 19:25:42 发布

阅读量283

点赞数 1

本文链接：https://blog.csdn.net/L_csdn123/article/details/119574148

版权

情景: 因为导航树不确定几级采用了递归的写法，开合时想要有个过渡的效果

// HTML
<template>
	<div id="TreeItem" class="myTree ">
		<transition-group
	          name="expand"					// 起个名字下面的css要用这个名字开头
	          @enter="enter"					// 这三个是事件就是点击进入出来的
	          @after-enter="afterEnter"
	          @leave="leave"
        >
        <Tree
          :key="item.code"		// 这个Tree就是调自身的递归组件，用transition-group标签包着要求要有自己的key
        ></Tree>				//这个递归的组件还需要传些别的这里讲的样式用key就行我就先不写别的了
        </transition-group>
	</div>
</template>

// JS 
 enter(element) {
      const width = getComputedStyle(element).width;

      element.style.width = width;
      element.style.position = "absolute";
      element.style.visibility = "hidden";
      element.style.height = "auto";

      const height = getComputedStyle(element).height;

      element.style.width = null;
      element.style.position = null;
      element.style.visibility = null;
      element.style.height = 0;

      // 强制触发重绘，确保动画被正确地执行
      getComputedStyle(element).height;

      // 触发动画
      // 这里使用 setTimeout
      // 确保浏览器已经完成 height = 0 的设置
      setTimeout(() => {
        element.style.height = height;
      });
    },
 afterEnter(element) {
      element.style.height = "auto";
    },
 leave(element) {
      const height = getComputedStyle(element).height;

      element.style.height = height;

      // 强制重绘保证动画被正确地触发
      getComputedStyle(element).height;

      setTimeout(() => {
        element.style.height = 0;
      });
    },

// css

#TreeItem{
  will-change: height;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}
.expand-enter-active,
.expand-leave-active {
  transition: all 0.6s ease;
}

.expand-enter,
.expand-leave-to {
  height: 0;
}
.myTree {
  overflow: hidden;
}

总结：在导航树上加动画，transition标签使用单个元素，transition-group标签适用多个元素，用transition-group标签包裹想要实现动画的元素，然后把js，css的方法和样式用上就能达到所谓手风琴的效果。