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

Question

我已经构建了一个带有汉堡幻灯片菜单的导航。菜单工作正常，除了我尝试使用的幻灯片 css 过渡。基本上，我的代码完全忽略了过渡的“滑动效果”。 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、谷歌、微软、三星和数以千计的个人开发者的共同努力。包括W3Cread the article。

MDN 内容和 W3C 内容之间的连接现在是自动化的。虽然 w3schools 需要向员工支付费用以使其内容保持最新，但 MDN 会自动从制定标准的人员那里获取更新。而且您总是会在 MDN 页面上找到指向特定属性、方法或元素的官方推荐的链接。