vue 动画效果自上而下消失

可以使用 Vue 的过渡动画实现从上往下消失的效果。

首先，在需要添加动画的元素上添加 `transition` 属性，指定过渡动画的类名：

<template>
  <div class="container">
    <div class="box" v-if="show" v-bind:class="{ 'slide-down': !hide }">
      动画效果
    </div>
  </div>
</template>

<style>
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.5s ease;
}

.slide-down-enter,
.slide-down-leave-to {
  transform: translateY(-100%);
}
</style>

在上面的代码中，我们给 `div.box` 添加了 `transition` 属性，并设置了过渡动画的类名为 `slide-down`。当 `show` 为 `true` 时，`div.box` 显示，添加 `slide-down-enter` 和 `slide-down-enter-active` 类名，表示元素进入时的动画效果；当 `show` 为 `false` 时，`div.box` 隐藏，添加 `slide-down-leave` 和 `slide-down-leave-active` 类名，表示元素离开时的动画效果。

接下来，在样式中定义动画效果的具体实现。我们可以使用 `transform` 属性控制元素的位置，将元素从上方移动到下方，实现自上而下消失的效果。具体实现代码如下：

.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.5s ease;
}

.slide-down-enter,
.slide-down-leave-to {
  transform: translateY(-100%);
}

在上面的代码中，我们使用 `translateY(-100%)` 将元素从上方移动到下方，实现了自上而下消失的效果。