使用 vue 的幻灯片转换无法正常工作

Question

我构建了一个带有汉堡幻灯片菜单的导航。菜单工作正常，除了我尝试使用的幻灯片 css 过渡。基本上，我的代码完全忽略了转换的 "sliding effect" 。 An example of the transistion I am trying to achieve from the W3C

注意：我使用tailwind css框架来设置幻灯片菜单的宽度，而不是在.sidenav中设置宽度：<div id="mySidenav" class="sidenav bg-black w-2/3 sm:w-1/2 md:w-1/3">

Vue.component('navigation',{
    template: '#navigation',
    methods: {
      openSlideMenu(){
        this.$emit('open-slide');
      }
    },
});

Vue.component('slide-menu',{
    template: '#slide-menu',
    methods: {
      close(){
        this.$emit('close-slide');
      }
    },
});

new Vue({
  el: '#app',
  data() {
    return {
      showSlideMenu: false,
    }
  },

  methods: {
    openSlideMenu(){
      this.showSlideMenu = true;
    },
    closeSlideMenu(){
      this.showSlideMenu = false;
    }
  }
});

.sidenav {
  height: 100%;
  
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.slide-enter, .slide-leave-to /* .slide-leave-active below version 2.1.8 */ {
    top: 0;
    left: 0;
    transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script type="x/template" id="navigation">
  <div>
    <nav class="flex items-center justify-between bg-red-light h-12 ">
      <div v-on:click="openSlideMenu()" class="cursor-pointer p-8">
            <i class="material-icons">menu</i>
      </div>
    </nav>
  </div>
</script>

<script type="x/template" id="slide-menu">
  <div>
    <div id="mySidenav" class="sidenav bg-black w-2/3 sm:w-1/2 md:w-1/3">
      <i @click="close()" class="closebtn cursor-pointer" >&times;</i>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>
  </div>
</script>

<div id="app">
  <transition name="slide">
    <slide-menu v-show="showSlideMenu" v-on:close-slide="closeSlideMenu()"></slide-menu>
  </transition>
  <navigation v-on:open-slide="openSlideMenu()"></navigation>

<main>
  <h1>Some Content</h1>
</main>
</div>

Answer 1

.slide-enter-active {
  animation: menu-slide .5s;
}
.slide-leave-active {
  animation: menu-slide .5s reverse;
}
@keyframes menu-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

... 就是您所需要的一切。还有菜单上的height: 100vh;，当然是：

Vue.component('navigation',{
    template: '#navigation',
    methods: {
      openSlideMenu(){
        this.$emit('open-slide');
      }
    },
});

Vue.component('slide-menu',{
    template: '#slide-menu',
    methods: {
      close(){
        this.$emit('close-slide');
      }
    },
});

new Vue({
  el: '#app',
  data() {
    return {
      showSlideMenu: false,
    }
  },

  methods: {
    openSlideMenu(){
      this.showSlideMenu = true;
    },
    closeSlideMenu(){
      this.showSlideMenu = false;
    }
  }
});

.sidenav {
  height: 100vh;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.slide-enter-active {
  animation: menu-slide .5s;
}
.slide-leave-active {
  animation: menu-slide .5s reverse;
}
@keyframes menu-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script type="x/template" id="navigation">
  <div>
    <nav class="flex items-center justify-between bg-red-light h-12 ">
      <div v-on:click="openSlideMenu()" class="cursor-pointer p-8">
            <i class="material-icons">menu</i>
      </div>
    </nav>
  </div>
</script>

<script type="x/template" id="slide-menu">
  <div>
    <div id="mySidenav" class="sidenav bg-black w-2/3 sm:w-1/2 md:w-1/3">
      <i @click="close()" class="closebtn cursor-pointer" >&times;</i>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>
  </div>
</script>

<div id="app">
  <transition name="slide">
    <slide-menu v-show="showSlideMenu" v-on:close-slide="closeSlideMenu()"></slide-menu>
  </transition>
  <navigation v-on:open-slide="openSlideMenu()"></navigation>

<main>
  <h1>Some Content</h1>
</main>
</div>

顺便说一下，W3C 不是 w3schools。 w3schools 是一个尝试通过向正在搜索官方文档的人展示广告来获利的项目。

如果您感到困惑，请始终搜索 MDN。

为什么？因为 MDN 并不是由 Mozilla 单独维护的。这是 Mozilla、Google、微软、三星和数以千计的个人开发者的共同努力。包括 W3C read the article.

MDN 内容和 W3C 内容之间的连接现在是自动的。虽然 w3schools 需要付钱给他们的员工以保持他们的内容是最新的，但 MDN 会自动从制定标准的人那里获得更新。您总是会在 MDN 页面上找到针对特定属性、方法或元素的官方推荐 link。

使用 vue 的幻灯片转换无法正常工作

Slide transition with vue isn't working properly

css-transitions

vue.js