Vue CSS过渡效果在iPhone移动端Chrome不生效，求解决或替代方案

算力阿峰

2026-10-1

iOS端Chrome Vue过渡动画失效修复方案

核心问题修复

1. 修正错误的CSS选择器

现有代码中容器类选择器写法错误：

/* 错误写法：选择container内部带有overlay-open类的子元素 */
.effect-content-push .container .overlay-open

你实际是给container节点本身添加了overlay-open类，需要去掉选择器中间的空格：

/* 正确写法 */
.effect-content-push .container.overlay-open {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translateX(-50%) translateZ(0);
    transform: translateX(-50%) translateZ(0);
}

2. 适配WebKit内核渲染规则

iOS端所有第三方浏览器均强制使用WebKit内核，部分场景下需要显式添加前缀、触发GPU硬件加速才能正常渲染过渡，修改所有过渡相关CSS：

.content-push-enter, .content-push-leave-to {
  background: rgba(153,204,51,1); 
  -webkit-transform: translateX(100%) translateZ(0);
  transform: translateX(100%) translateZ(0); 
}
.content-push-enter-active, .content-push-leave-active { 
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s; 
}

3. 调整状态更新时序

WebKit内核存在DOM更新时序差问题，可将open状态更新放到$nextTick回调中执行，避免类名切换和状态更新同时触发导致的过渡丢失：

methods: {
  openOverlay() { 
    this.container.classList.add('overlay-open'); 
    this.$nextTick(() => {
      this.open = true;
    })
  }, 
  closeOverlay() { 
    this.container.classList.remove('overlay-open'); 
    this.$nextTick(() => {
      this.open = false; 
    })
  } 
}