vue如何监听元素的显示与隐藏

Vue提供了`v-show`指令来控制元素的显示和隐藏，但是`v-show`只是单纯的控制元素的显示与隐藏，没有提供监听元素显示与隐藏的事件。

如果需要监听元素的显示与隐藏事件，可以使用Vue提供的`v-on`指令结合`transitionend`事件来实现。具体步骤如下：

1. 在元素上添加`v-on:transitionend`指令，绑定一个方法，该方法将会在元素的过渡动画结束后被调用。

<template>
  <div class="box" v-show="show" v-on:transitionend="onTransitionEnd"></div>
</template>

2. 在组件的`methods`中定义`onTransitionEnd`方法，该方法会在元素的过渡动画结束后被调用，并且会传入一个事件对象。

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    onTransitionEnd(event) {
      if (event.propertyName === 'opacity') {
        if (this.show) {
          // 元素显示
          console.log('元素显示')
        } else {
          // 元素隐藏
          console.log('元素隐藏')
        }
      }
    }
  }
}
</script>

在`onTransitionEnd`方法中，可以根据元素的`opacity`属性值来判断元素是显示还是隐藏。当元素的`opacity`属性值从`0`变为`1`时，表示元素从隐藏状态变为显示状态；当元素的`opacity`属性值从`1`变为`0`时，表示元素从显示状态变为隐藏状态。

需要注意的是，`transitionend`事件只会在元素完成过渡动画后才会被触发，因此需要为元素添加CSS过渡动画。