Question

我正在使用vue为菜单创建展开动画。所以我使用vue transition来做到这一点。

但是，我需要获得元素的高度才能完成我的项目，所以我选择在vue转换中使用javascript钩子。

但是我无法通过使用js钩子获得结果，但是当我仅使用css转换时它可以工作。

这是其中的一部分：

我想知道为什么它不起作用以及如何使用js钩子创建过渡。目前，我发现在active中进行过渡在js挂钩中不起作用，并且某些设置将在js钩子中反转。

new Vue ({
  el: '#app',
  data: {
    showList: false,
    showList2: false
  },
  methods: {
    toogleExpand () {
      this.showList = !this.showList;
    },
    toogleExpand2 () {
      this.showList2 = !this.showList2;
    },
    expandProcess (el) {
      el.style.transition = 'height .5s'
      el.style.overflow = 'hidden'
    },
    expandOrigin (el) {
      el.style.height = 0
    },
    expandEnd (el) {
      el.style.height = '72px'
    }
  }
})

.expand2-leave-active, .expand2-enter-active {
  transition: all .5s;
  overflow: hidden;
}
.expand2-enter, .expand2-leave-to {
  height: 0;
}
.expand2-enter-to, .expand2-leave {
  height: 72px;
}

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
 <div id="app">
  <button @click="toogleExpand">toogle</button>
  <transition name="expand"
    @leave-active="expandProcess"
    @entwe-active="expandProcess"
    @enter-to="expandEnd"
    @leave="expandEnd"
    @leave-to="expandOrigin"
    @enter="expandOrigin"
    >
    <ul v-show="showList">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </transition>
  <p>middle</p> 
  <button @click="toogleExpand2">toogle2</button>
  <transition name="expand2">
    <ul v-show="showList2">
      <li>11</li>
      <li>22</li>
      <li>33</li>
    </ul>
  </transition>
  <p>down</p>
</div>
</body>
</html>

如何将Vue从CSS转换为JS钩子？

0 个答案: