Блог

Я пытаюсь создать переход на мобильную страницу в vue, который должен выглядеть как переходы на страницы собственного приложения IOS для моего гибридного приложения.

Для достижения этой цели я создал css-переход в vue.

Он отлично работает на моем компьютере и в мобильном safari, но в моем мобильном chrome для iPhone переход не отображается.

Анимацию можно найти здесь 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, возможно, уже есть переход слайдов, который я мог бы использовать, если это так, то не стесняйтесь указывать мне правильную библиотеку/кодовый набор, которые я мог бы использовать.