视图转换动画-startViewTransition

效果

有效果的

没有效果的

移动位置

// 调用document.startViewTransition，浏览器会捕捉当前页面的状态，类似于实时截图，或者“快照”
// 执行实际的 dom 变化，再次记录变化后的页面状态（截图）

// 触发两者的过渡动画，包括透明度、位移等变化，也可以自定义 CSS 动画
// 默认情况下是整个页面的淡入淡出变化

// ::view-transition-old表示「旧视图」的状态，也就是变化之前的截图
// ::view-transition-new表示「新视图」的状态，也就是变化之后的截图

// 如果需要指定具体元素的变化，可以给该元素指定 view-transition-name
// 前后变化不一定要同一元素，浏览器是根据 view-transition-name 寻找的
// 同一时间页面上不能出现两个相同 view-transition-name 的元素，不然视图变化会失效

代码

<div style="widht: 1000px; height: 250px; background: #ccc; display: flex;">
  <div style="flex:1; border-right:1px solid #000; position:relative;">
    <div id="box1" style="position:absolute; left:0; top:0; width:50px; height:50px;background:#58bc58;">有效果的</div>
  </div>
  <div style="flex:1; position:relative;">
    <div id="box2" style="position:absolute; left:0; top:0; width:50px; height:50px; background:#58b;">没有效果的</div>
  </div>
</div>
<div>
  <button id='changeBtn' style="margin-top:10px; user-select:none;">移动位置</button>
</div>

let changeBtn = document.getElementById('changeBtn')
let index1 = 0
let index2 = 0
changeBtn.onclick = async (ev)=>{
  console.log(ev)
  let box2 = document.getElementById('box2')
  let box3 = document.getElementById('box1')
  if( index2%2 === 0 ){
    box2.style.left = '150px'
    box2.style.top = '150px'
  } else {
    box2.style.left = '0px'
    box2.style.top = '0px'
  }
  index2++
  if( document.startViewTransition ){ // 支持
      document.startViewTransition(() => { // 开始视图变换
      let box1 = document.getElementById('box1')
      if( index1%2 === 0 ){
        box1.style.left = '150px'
        box1.style.top = '150px'
      } else {
        box1.style.left = '0px'
        box1.style.top = '0px'
      }
      index1++
    });
  } else { // 不支持
    console.log('不支持startViewTransition')
  }
}