Vue在插入之前添加类，离开它答案

【问题标题】：Vue add class before insert, leave itVue在插入之前添加类，离开它
【发布时间】：2021-08-19 22:49:19
【问题描述】：

我有一个自定义动画，常规的 Vue transition 并没有完全覆盖。我在其他地方用条件v-bind:class 实现了它，但这不适用于条件v-if 块或v-for 组。

我需要像v-enter-to一样在元素输入后一帧添加一个类（'open'），但我需要它永远不会从元素中删除。

然后我需要在离开时将其移除以触发关闭动画。

我是否使用了 Vue 转换错误，而这在转换中是完全可能的，或者有没有办法围绕进入/离开功能添加/删除类？

.accordion {
    overflow: hidden;

    > div {
        margin-bottom: -1000px;
        transition: margin-bottom .3s cubic-bezier(.5,0,.9,.8),visibility 0s .3s,max-height 0s .3s;
        max-height: 0;
        overflow: hidden;
    }

    &::after {
        content: "";
        height: 0;
        transition: height .3s cubic-bezier(.67,.9,.76,.37);
        max-height: 35px;
    }

    &.open {
        max-height: 8000px;

        > div {
            transition: margin-bottom .3s cubic-bezier(.24,.98,.26,.99);
            margin-bottom: 0;
            max-height: 100000000px;
            position: relative;
        }

        &::after {
            height: 35px;
            max-height: 0;
            transition: height .3s cubic-bezier(.76,.37,.67,.9),max-height 0s .3s;
        }
    }
}

<transition name="accordion" :duration="300">
  <div class="accordion" v-if="equipmentSelections.length === 0">
    <div>
      <p>Begin by selecting equipment from the list</p>
    </div>
  </div>
 </transition>
 
<transition-group name="accordion" :duration="300">
  <div v-for="equipment in equipmentSelections" v-bind:key="equipment.unitNumber" class="accordion">
    <div>
      <h3 v-on:click="updateSelections(equipment)">{{equipment.unitNumber}}</h3>
    </div>
  </div>
</transition-group>

【问题讨论】：

标签： css vue.js animation

【解决方案1】：

您可以通过使用 javascript 钩子从 vue 转换组件中获得更多功能。

例如：演示：https://codepen.io/KingKozo/pen/QWpBPza

HTML：

<div id="app">
  <div>
    <button type="button" @click="toggle">Toggle</button>
  </div>
  <transition name="label" v-on:enter="enter" v-on:before-leave="leave">
    <div v-if="isOpen">Hi</div>
  </transition>
</div>

CSS

.label-enter-active, .label-leave-active {
  transition: opacity 1s;
}
.label-enter, .label-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.staying-visible {
  background-color: red;
  color: white;
}

Javascript

const vm = new Vue({
  el: '#app',
  data: {
    isOpen: false
  },
  methods: {
    enter(el){
      el.classList.add("staying-visible")
    },
    leave(el){
      el.classList.remove("staying-visible")
    },
    toggle(){
      this.isOpen = !this.isOpen
    }
  }
})

在我提供的示例中，我将一个全新的类“保持可见”添加到输入元素并稍后将其删除。在提供的示例中，我删除了“离开前”的类，以使更改可见，但对于您的特定用例，您似乎也可以在“离开”挂钩期间将其删除。

要了解更多关于如何使用 javascript 转换钩子的信息，请查看官方文档：https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

【讨论】：