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

Posted 2023-02-22

【中文标题】Vue在插入之前添加类，离开它

【英文标题】：Vue add class before insert, leave it

【发布时间】：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>

【参考方案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