点击项目元素时如何实现平滑的样式过渡效果？

我有一个4元素的作品集展示网格，点击项目元素时想把它的position从relative切换为absolute（或fixed），并扩展到窗口全屏，但给元素加transition: all .5s或transition: position .5s都没效果。

原代码 #

JavaScript

const projectItems = document.querySelectorAll('.project-item')
projectItems.forEach(item => {
  item.onclick = () => {
    item.classList.remove('relative')
    item.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 20'
  }
  item.ondblclick = () => {
    item.style.cssText = 'position: relative;'
  }
})

HTML

<div class="relative" id="projects-wrapper">
  <div class="container">
    <div class="projects-wrapper grid grid-cols-2 grid-rows-2 gap-[1vw] mt-[5vw]">
      <div>
        <div class="project-item relative overflow-hidden">
          <div class="w-full h-[70%] overflow-hidden rounded-xl">
            <img src="./assets/img/hidden-image-1.jpg" class="h-full" alt="project item">
          </div>
        </div>
      </div>
      <div>
        <div class="project-item relative overflow-hidden">
          <div class="w-full h-[70%] overflow-hidden rounded-xl">
            <img src="./assets/img/hidden-image-1.jpg" class="h-full" alt="project item">
          </div>
        </div>
      </div>
      <div>
        <div class="project-item relative overflow-hidden">
          <div class="w-full h-[70%] overflow-hidden rounded-xl">
            <img src="./assets/img/hidden-image-1.jpg" class="h-full" alt="project item">
          </div>
        </div>
      </div>
      <div>
        <div class="project-item relative overflow-hidden">
          <div class="w-full h-[70%] overflow-hidden rounded-xl">
            <img src="./assets/img/hidden-image-1.jpg" class="h-full" alt="project item">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

核心原因 #

1. position属性本身不支持CSS过渡：CSS过渡只能作用于数值型属性（如top、left、width、height），position这种离散属性无法过渡。
2. 直接用style.cssText覆盖样式会丢失过渡属性，而且切换position后元素脱离文档流，位置尺寸的变化会瞬间完成，没有过渡空间。

解决方案 #

1. 用CSS类管理状态（基础版） #

放弃直接操作position的过渡，转而过渡top、left、width、height这些可动画属性，通过添加/移除类来控制全屏状态。

添加CSS样式

.project-item {
  position: relative;
  transition: all 0.5s ease; /* 针对所有可过渡属性添加动画 */
}

/* 全屏状态类 */
.project-item.expanded {
  position: fixed; /* 用fixed更适合全屏，避免滚动影响 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 20;
  margin: 0; /* 清除网格布局的gap和margin影响 */
}

修改JavaScript

const projectItems = document.querySelectorAll('.project-item')
projectItems.forEach(item => {
  item.onclick = () => {
    item.classList.add('expanded')
  }
  item.ondblclick = () => {
    item.classList.remove('expanded')
  }
})

2. 优化版：从网格位置平滑过渡到全屏 #

如果想让元素从原来的网格位置自然过渡到全屏，需要先记录元素的初始位置，再触发过渡：

修改JavaScript

const projectItems = document.querySelectorAll('.project-item')
projectItems.forEach(item => {
  item.onclick = () => {
    // 获取元素在视口中的位置和尺寸
    const rect = item.getBoundingClientRect()
    
    // 先固定元素到初始位置，模拟relative状态
    item.style.position = 'fixed'
    item.style.top = `${rect.top}px`
    item.style.left = `${rect.left}px`
    item.style.width = `${rect.width}px`
    item.style.height = `${rect.height}px`
    
    // 强制浏览器重绘，确保过渡生效
    requestAnimationFrame(() => {
      item.classList.add('expanded')
    })
  }
  
  item.ondblclick = () => {
    item.classList.remove('expanded')
    // 过渡完成后重置行内样式，让网格布局接管
    setTimeout(() => {
      item.style.position = ''
      item.style.top = ''
      item.style.left = ''
      item.style.width = ''
      item.style.height = ''
    }, 500) // 等待过渡动画结束
  }
})

对应调整CSS

.project-item.expanded {
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 20;
  margin: 0;
}

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