uniapp里div从底部弹出动画效果

在 UniApp 开发中，如果你想实现一个 div 元素从底部弹出的动画效果，你可以利用 Vue 的 `v-enter` 和 `v-enter-active` 组件样式以及 CSS 动画。首先，在你的 Vue 组件的模板部分，设置一个包含需要动画的 div：

<template>
  <view class="container">
    <transition name="slideInDown">
      <div v-if="show" class="popup" @clickoutside="hide">内容</div>
    </transition>
  </view>
</template>

然后，在 CSS 部分定义动画样式，例如使用 CSS3 的 `transform` 属性结合 `animation`：

<style scoped>
.container {
  position: relative;
}

.popup {
  display: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 16px;
  background-color: #fff;
  transition: transform .5s ease-in-out; /* 设置过渡时间 */
}

.slideInDown-enter {
  opacity: 0;
  transform: translateY(100%); /* 初始状态，元素完全隐藏并下移 */
}

.slideInDown-enter-active {
  opacity: 1;
  transform: translateY(0); /* 进入动画，元素逐渐从底部滑动到可视位置 */
}

.slideInDown-leave-to {
  opacity: 0;
  transform: translateY(100%); /* 离开动画，元素再次下移并隐藏 */
}
</style>

最后，通过 Vue 的数据绑定控制 show 的状态，比如点击按钮触发显示：

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    hide() {
      this.show = false;
    },
    showMessage() {
      this.show = true; // 弹出动画
    },
  },
};
</script>

这样，当调用 `showMessage()` 方法时，div 就会从底部平滑地弹出来。