时间戳

首页 > 解决方案 > vuejs css 过渡不适用于移动 chrome

vue.js - vuejs css 过渡不适用于移动 chrome

问题描述

我正在尝试在 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。

标签： vue.jsanimationmobiletransition

解决方案

把它当作它的价值，但是在用一个简单的较慢的动画和简单的更快的动画复制了这个问题之后，我能够通过在 iOS 上杀死 Chrome 应用程序并重新启动它来解决这个问题 ‍♂️</ p>

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 转换文档页面也没有显示工作转换。

推荐阅读