给组件<popup class="animatePoup" :popupItem="popupItem" :navItem="navItem" :childList="childList"></popup>使用uni-app的方式加上一个带隐藏的动画

您可以使用uni-app提供的动画系统，为您的popup组件添加隐藏动画。以下是一个简单的示例代码：

<template>
  <view>
    <popup :class="{'animatePopup': isShow}" :popupItem="popupItem" :navItem="navItem" :childList="childList"></popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      popupItem: 'popup content',
      navItem: 'nav content',
      childList: ['child1', 'child2', 'child3']
    }
  },
  methods: {
    togglePopup() {
      this.isShow = !this.isShow;
    }
  },
  mounted() {
    // 使用uni-app提供的动画系统，为popup组件添加隐藏动画
    uni.createAnimation({
      duration: 500,
      timingFunction: 'ease-out',
      delay: 0
    }).opacity(0).step();
    this.popupAnimation = uni.createAnimation({
      duration: 500,
      timingFunction: 'ease-out',
      delay: 0
    }).opacity(1).step();
  }
}
</script>

<style>
.animatePopup {
  animation: popup-anim 0.5s ease-out;
}

@keyframes popup-anim {
  from {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
</style>

在这个示例中，我们在popup组件上添加了一个类名`animatePopup`，当`isShow`为true时，通过动画系统为该组件添加展示动画；当`isShow`为false时，为该组件添加隐藏动画。您可以根据自己的需求，调整动画的细节和参数。