Question

我建立了一个带有汉堡幻灯片菜单的导航。菜单工作正常，除了我要使用的幻灯片CSS过渡。基本上，我的代码完全忽略了过渡的“滑动效果”。 An example of the transistion I am trying to achieve from the W3C

注意：我使用的是顺风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，Microsoft，Samsung和数千名独立开发人员的共同努力。包括W3C read the article。

MDN内容和W3C内容之间的连接现在已自动化。虽然w3schools需要向员工付费以保持其内容最新，但MDN会从设置标准的人员那里自动获取更新。而且，您始终可以在MDN页面上找到特定属性，方法或元素的“官方建议”链接。

带有vue的幻灯片过渡无法正常工作

1 个答案: