<div class="special-list"> <div class="section" v-for="item in serveList" :class="item.active ? 'active' : ''"> <div class="father" @click="fatherSection(item)"> <pointLight :color="item.active ? '#44ebfb' : '#ffffff'" :number="12" class="test" /> <img @dragstart.prevent class="father-image" :src="`${publicUrl.imgBaseUrl}${item.active ? 'group147.png' : 'group146.png'}`" alt="" /> <div class="text">{{ item.name }}</div> </div> <div class="son" :class="item.active ? 'enter' : 'out'" v-show="item.active"> <div v-for="itemt in item.children" :key="itemt.id" class="article" @click="sonSection(item, itemt)" > <pointLight :color="itemt.active ? '#44ebfb' : '#ffffff'" :number="12" class="test" /> <img @dragstart.prevent class="son-image" :src="`${publicUrl.imgBaseUrl}${itemt.active ? 'group145.png' : 'group144.png'}`" alt="" /> <div class="text">{{ itemt.name }}</div> </div> </div> </div> </div> 点击class='father' 的节点,将下面的class='son'的节点动画隐藏

好的，您需要在点击class='father'的节点时，将下面的class='son'的节点动画隐藏。具体实现步骤如下：

1. 第一步，我们需要在父组件中添加一个方法fatherSection，用于点击class='father'的节点时触发，并将该节点下的class='son'的节点动画隐藏。例如：

methods: {
  fatherSection(item) {
    item.active = !item.active; // 切换父节点的状态

    // 遍历所有节点，将非当前节点的class='son'的节点隐藏
    this.serveList.forEach((element) => {
      if (element.id != item.id) {
        element.active = false;
      }
    });
  },
},

2. 第二步，我们需要在子组件class='son'的节点中添加一个过渡效果，并使用Vue3的v-show指令来控制其显示和隐藏。例如：

<div class="son" :class="item.active ? 'enter' : 'out'" v-show="item.active">

其中，`:class`指令用于动态绑定class属性，当item.active为true时，添加class='enter'，否则添加class='out'。而v-show指令则用于控制节点的显示和隐藏，当item.active为true时，显示节点，否则隐藏节点。

3. 第三步，我们需要添加一些CSS样式，使得子组件class='son'的节点具有动画效果。例如：

.son {
  position: relative;
  overflow: hidden;
  height: 0;
  transition: all 0.5s ease-in-out; /* 过渡效果 */
}

.enter {
  height: auto; /* 显示节点 */
}

.out {
  height: 0; /* 隐藏节点 */
}

这样，当我们点击class='father'的节点时，就可以通过切换item.active的值来控制class='son'的节点的显示和隐藏，并且添加动画效果了。