vuejs css 过渡不适用于移动 chrome答案

【问题标题】：vuejs css transition not working on mobile chromevuejs css 过渡不适用于移动 chrome
【发布时间】：2021-11-27 00:47:26
【问题描述】：

我正在尝试在 vue 中创建一个移动页面转换，它应该看起来像我的混合应用的原生 IOS 应用页面转换。

为了实现这一点，我在 vue 中创建了一个 css 过渡。

它在我的电脑和移动 safari 上运行良好，但在我的 iPhone 移动 chrome 上没有显示过渡。

动画可以在这里找到https://codepen.io/patrick2009/pen/eYRqMap

这是完整的代码：

  <div id="app" class="effect-content-push">
    <div class="container">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <button @click="openOverlay">ANIMATE</button>
    </div>
    <transition name="content-push">
      <div class="overlay content-push" v-if="open">
        <button
          type="button"
          @click.prevent="closeOverlay"
          class="overlay-close"
        >
          Close
        </button>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: "app",
  data() { 
    return { 
      effect: 'content-push', 
      open: false, 
      overlay: null, 
      container: null } 
  }, 
  mounted() { 
    this.overlay = document.querySelector('.overlay');
    this.container = document.querySelector('.container'); 
  }, 
  methods: {
    openOverlay() { 
        this.container.classList.add('overlay-open'); 
        this.open = true;
      }, 
    closeOverlay() { 
      this.container.classList.remove('overlay-open'); 
      this.open = false; 
      } 
    }
};
</script>
<style>
html, body { height: 100%; } 
body { background: #fff; } 
#app { height: 100%; }
/* Overlay style */ 
  .overlay { 
    position: fixed; width: 100%; height: 100%; top: 0; left: 0; 
  } 
  .effect-content-push .container .overlay-open
 { 
    transition: transform 0.5s; 
    transform: translateX(-50%);
 }
.effect-content-push .overlay { 
  background: rgba(153,204,51,1); 
} 
.content-push-enter, .content-push-leave-to {
  background: rgba(153,204,51,1); 
  transform: translateX(+100%); 
  }
.content-push-enter-active, .content-push-leave-active { 
  transition: transform 0.5s; 
}
</style>

任何帮助将不胜感激。

由于我对 vue 还很陌生，可能已经有我可以使用的幻灯片过渡，如果是这种情况，请不要犹豫，将我指向我可以使用的正确库/codepen。

【问题讨论】：

我在移动 Chrome 中也看到了这个问题。你能找到解决办法吗？我制作了一个较小的代码笔，显示动画在 1500 毫秒时工作，但在 1000 毫秒时失败（在桌面上工作正常，但在移动设备上尝试）。这也是我在我的应用程序中看到的行为。 codepen.io/definitelynotamachine/pen/JjrxZYj

标签： vue.js animation mobile transition

【解决方案1】：

考虑到它的价值，但是在 codepen 中复制了这个问题，一个简单的较慢的动画有效，而一个简单的较快的动画无效，我能够通过在 iOS 上杀死 Chrome 应用程序并重新启动它来解决这个问题? ?‍♂️

https://codepen.io/definitelynotamachine/pen/JjrxZYj

// SLOW TRANSITION

.crossfade-1-enter,
.crossfade-1-leave-to {
  opacity: 0;
}

.crossfade-1-leave-active,
.crossfade-1-enter-active {
  transition: opacity 1500ms;
}

// FAST TRANSITION

.crossfade-2-enter,
.crossfade-2-leave-to {
  opacity: 0;
}

.crossfade-2-leave-active,
.crossfade-2-enter-active {
  transition: opacity 1000ms;
}

我的第一个线索是官方的 Vue 转换文档页面也没有显示有效的转换。

【讨论】：