如何为点击展开的项目内容添加平滑下滑动画？

你当前的问题在于用display: none/flex切换显隐，而display属性的变化不支持CSS过渡动画，所以得换用可过渡的属性来实现平滑效果。下面是具体解决方案：

核心思路 #

放弃直接切换display，改用max-height、opacity配合overflow: hidden来实现展开/收起，再通过CSS过渡实现动画效果；JavaScript只负责切换控制类即可。

修改后的完整代码 #

JavaScript #

const projectContain = document.querySelectorAll(".projet-contain");
projectContain.forEach((elm) => {
  elm.addEventListener("click", function() {
    const projectContent = elm.querySelector(".project-content");
    const arrow = elm.querySelector(".arrow-down");
    
    // 切换内容的active类，箭头旋转类
    projectContent.classList.toggle("active");
    arrow.classList.toggle('rotate-arrow');
  });
});

CSS #

body {
  background-color: purple;
}

.projet-contain {
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
  width: auto;
  height: auto;
  background: radial-gradient(circle, rgba(238, 174, 202, 0.200) 0%, rgba(148, 188, 233, 0.200) 100%);
  border-radius: 10px 10px 10px 10px;
  padding: 10px;
  user-select: none;
}

.preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section>div>div>a {
  text-decoration: none;
  color: white;
}

.convertigo {
  width: 10vw;
}

.arrow-down {
  transition: transform 0.5s;
  width: 1.5vw;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.rotate-arrow {
  transform: rotate(180deg);
}

.project-content {
  justify-content: center;
  /* 默认收起状态 */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /* 给属性变化加上过渡动画 */
  transition: all 0.5s ease-in-out;
  display: flex; /* 始终保持display:flex，避免布局跳动 */
}

/* 展开状态的类 */
.project-content.active {
  max-height: 2000px; /* 设置一个足够大的值，覆盖内容最大高度 */
  opacity: 1;
}

HTML #

只需要移除project-content上的style="display:none;"，因为默认状态由CSS控制：

<section>
  <div class="projet-contain">
    <div class="preview">
      <a>Projet Convertigo</a>
      <img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
      <img src="images/Convertigo.png" class="convertigo" alt="">
    </div>
    <div class="project-content">
      <a>c'est la div 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum quo iure culpa libero? Dolor incidunt, adipisci, dignissimos sunt odio expedita ullam sapiente officiis, architecto culpa reiciendis voluptatum ut dolorum ipsa vero nihil? Earum voluptate molestiae nemo! Iste, sit neque. Accusantium, sed aliquam omnis ut laboriosam maxime obcaecati libero natus eius perferendis ipsum ipsam. Nostrum facilis blanditiis voluptas ipsa molestiae inventore consequatur unde velit quas quod, quo obcaecati commodi praesentium? Earum cumque velit vero a facilis voluptatem quis debitis molestiae tenetur consequuntur, commodi architecto beatae id quas rerum unde rem alias itaque amet sed explicabo. Ad rem, quod possimus dignissimos deleniti molestiae natus magni ducimus sit quis dicta voluptatibus itaque quasi reprehenderit facilis fuga soluta alias! Quasi suscipit soluta dignissimos nulla iusto dolores amet temporibus, molestias debitis voluptate praesentium similique distinctio corrupti. Provident numquam cum nostrum aut commodi incidunt ipsam quibusdam laudantium mollitia aspernatur, magni ab perspiciatis inventore exercitationem consequuntur, laborum autem dolorum doloremque omnis voluptatibus illo nesciunt? Ipsam voluptas atque blanditiis alias facere laudantium error doloremque maiores magni enim deserunt iste architecto, voluptatem, porro quisquam quas, deleniti tempore. Sed tempore nulla, perspiciatis natus temporibus debitis maiores ipsam illum esse ut maxime quia in consequuntur ratione error veritatis, quod aut! Enim.</a>
      <div>
        <img src="images/matete.webp" alt="">
      </div>
    </div>
  </div>
  <div class="projet-contain">
    <div class="preview">
      <a>Projet Convertigo</a>
      <img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
      <img src="images/Convertigo.png" class="convertigo" alt="">
    </div>
    <div class="project-content">
      <a>c'est la div 2</a>
    </div>
  </div>
  <div class="projet-contain">
    <div class="preview">
      <a>Projet Convertigo</a>
      <img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
      <img src="images/Convertigo.png" class="convertigo" alt="">
    </div>
    <div class="project-content">
      <a>c'est la div 3</a>
    </div>
  </div>
</section>

对你问题的针对性解答 #

1. transition放在哪里？
   要放在.project-content的基础样式里，因为是这个元素的max-height、opacity属性变化需要过渡动画。

2. 能否直接用JavaScript实现？
   可以，比如用Element.animate()方法写动画逻辑，但相比CSS过渡，代码更繁琐且性能不如原生CSS过渡高效，所以更推荐用上面的CSS+类切换的方式。

内容的提问来源于stack exchange，提问作者Ravnow