Vue.js 动画：从下方弹出的消息提示框

本文将介绍使用 Vue.js 的 Transition 组件实现一个从下方弹出的消息提示框，并添加自定义动画效果，提升用户体验。

首先，定义一个名为 'down' 的动画，该动画包括 'enter' 和 'leave' 两个状态，分别对应消息提示框的出现和消失动画效果：

.down {
  &-enter {
    &-from {
      position: fixed;
      left: 50%;
      transform: translate3d(-50%, -75px, 0);
      opacity: 0;
    }
    &-active {
      transition: all 1s;
    }
    &-to {
      opacity: 1;
    }
  }
  &-leave {
    &-from {
      position: fixed;
      left: 50%;
      transform: translate(-50%,75px);
      opacity: 1;
    }
    &-active {
      transition: all 1s;
    }
    &-to {
      opacity: 0;
    }
  }
}

然后，使用 Transition 组件包裹需要进行动画的元素，并设置 name 属性为 'down'，表示使用定义好的动画：

<template>
  <Transition name='down' @after-leave='onAfterLeave'>
    <div
      class='message-box'
      ref='messageRef'
      :class='`message-${type}`'
      :style='cssstyle'
      v-show='visible'
    >
      <icons :name=''success'' class='message_icon'></icons>
      <div class='message__content'>
        <span>{{ message }}</span>
      </div>
      <icons
        name='guanbi'
        @click='visible = false'
        v-if='showClose'
        class='message_CloseBtn'
      ></icons>
    </div>
  </Transition>
</template>

代码中使用了 v-show 指令控制消息提示框的显示与隐藏，并通过 :class 和 :style 绑定动态样式。该代码使用了 Vue.js 的 Transition 组件实现了一个从下方弹出的消息提示框，并添加了自定义动画效果，提升了用户体验。

注意：该代码示例使用了自定义的 'icons' 组件，需要根据实际情况进行调整。