通过animation实现display的block与none的动画效果

html:

<!--遮罩层-->
<div class="list-mask"
     :class="listShow ? 'show' : ''"
     @tap="hideList">
</div>

js:

data() {
  return {
    showList: false // 开始隐藏
  }
},
methods: {
  hideList() {
    this.showList = false
  }
}

stylus:

<style scoped lang="stylus" rel="stylesheet/stylus">
.list-mask
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: -2
  backdrop-filter: blur(10px)
  opacity: 1
  background: rgba(7, 17, 27, .6)
  display: none
  &.show
    display: block
    animation: show .5s

@-webkit-keyframes show
  0%
    opacity: 0
    background: rgba(7, 17, 27, 0)
  100%
    opacity: 1
    background: rgba(7, 17, 27, .6)  
</style>