vue 使用 Animate.css 实现 联系我们 组件开发

首先 要清楚, Animate.css 是一个 css动画库,为我们封装好了动画效果,我们只需要根据需求选择对应的css写入到div上即可:
animate.css: https://animate.style/

	fade: {
        title: '淡入淡出',
        fadeIn: '淡入',
        fadeInDown: '向下淡入',
        fadeInDownBig: '向下快速淡入',
        fadeInLeft: '向右淡入',
        fadeInLeftBig: '向右快速淡入',
        fadeInRight: '向左淡入',
        fadeInRightBig: '向左快速淡入',
        fadeInUp: '向上淡入',
        fadeInUpBig: '向上快速淡入',
        fadeOut: '淡出',
        fadeOutDown: '向下淡出',
        fadeOutDownBig: '向下快速淡出',
        fadeOutLeft: '向左淡出',
        fadeOutLeftBig: '向左快速淡出',
        adeOutRight: '向右淡出',
        fadeOutRightBig: '向右快速淡出',
        fadeOutUp: '向上淡出',
        fadeOutUpBig: '向上快速淡出'
      },
      bounce: {
        title: '弹跳类',
        bounceIn: '弹跳进入',
        bounceInDown: '向下弹跳进入',
        bounceInLeft: '向右弹跳进入',
        bounceInRight: '向左弹跳进入',
        bounceInUp: '向上弹跳进入',
        bounceOut: '弹跳退出',
        bounceOutDown: '向下弹跳退出',
        bounceOutLeft: '向左弹跳退出',
        bounceOutRight: '向右弹跳退出',
        bounceOutUp: '向上弹跳退出'
      },
      zoom: {
        title: '缩放类',
        zoomIn: '放大进入',
        zoomInDown: '向下放大进入',
        zoomInLeft: '向右放大进入',
        zoomInRight: '向左放大进入',
        zoomInUp: '向上放大进入',
        zoomOut: '缩小退出',
        zoomOutDown: '向下缩小退出',
        zoomOutLeft: '向左缩小退出',
        zoomOutRight: '向右缩小退出',
        zoomOutUp: '向上缩小退出'
      },
      rotate: {
        title: '旋转类',
        rotateIn: '顺时针旋转进入',
        rotateInDownLeft: '从左往下旋入',
        rotateInDownRight: '从右往下旋入',
        rotateInUpLeft: '从左往上旋入',
        rotateInUpRight: '从右往上旋入',
        rotateOut: '顺时针旋转退出',
        rotateOutDownLeft: '向左下旋出',
        rotateOutDownRight: '向右下旋出',
        rotateOutUpLeft: '向左上旋出',
        rotateOutUpRight: '向右上旋出'
      },
      flip: {
        title: '翻转类',
        flipInX: '水平翻转进入',
        flipInY: '垂直翻转进入',
        flipOutX: '水平翻转退出',
        flipOutY: '垂直翻转退出'
      },
      strong: {
        title: '强调类',
        bounce: '弹跳',
        flash: '闪烁',
        pulse: '脉冲',
        rubberBand: '橡皮筋',
        shake: '左右弱晃动',
        swing: '上下摆动',
        tada: '缩放摆动',
        wobble: '左右强晃动',
        jello: '拉伸抖动'
      }

在vue中使用:

npm install animate.css --save

main.js中：
import animated from 'animate.css' // npm install animate.css --save安装，在引入
Vue.use(animated)

实现效果如下, 从下到上 动画弹出, 从上到下动画消失.


核心代码如下:
子组件:

<div id="connect-us-outer">
    <!-- <el-button @click="showDiaog">connect us</el-button> -->
    <div class="connect-btn" @click="showDiaog" v-show="!visible">
      Connect us
    </div>

    <transition
      enter-active-class="animate__fadeInUp"
      leave-active-class="animate__fadeOutDown"
    >
      <div class="connect-us-custom-dialog animate__animated" v-show="visible">
        <div class="header">
          <slot name="header"> </slot>
          <div class="close-dialog" v-show="showClose" @click="showDiaog">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="body">
          <slot name="body"></slot>
        </div>
      </div>
    </transition>
  </div>


<style lang="scss">
#connect-us-outer {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 9999;
  .connect-btn {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    box-shadow: 0 2px 12px 0 #ccc;
    padding: 10px;
    cursor: pointer;
  }
  .connect-us-custom-dialog {
    width: 300px;
    height: 500px;
    box-shadow: 0 2px 12px 0 #ccc;
    background-color: #fff;
    position: fixed;
    right: 20px;
    bottom: 20px;
    .header {
      padding: 5px;
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      .close-dialog {
        cursor: pointer;
      }
    }
    .el-divider {
      margin: 10px 0;
    }
    .body {
      padding: 5px;
    }
  }
}
</style>

父组件:

    <connect-us :showClose="true">
      <div slot="header">
        <div>connect us</div>
      </div>
      <div slot="body">body</div>
    </connect-us>