vue中实现模态框弹出框动画（旋转弹出）

vue模态框弹窗动画

沃达尔 (Vodal)
A Nice vue modal with animations.

带有动画的尼斯vue模态。
安装

npm i -S vodal

  

 

  
1
 

用法

<template>
  <div class="home">
    <button @click="togglebox">点击弹出</button>
    <vodal :show="show" animation="rotate" @hide="show = false">
      <div>A vue modal with animations.</div>
    </vodal>
  </div>
</template>

<script>
import Vodal from "vodal";
export default {
  name: "name",
  components: {
    Vodal,
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    togglebox: function () {
      this.show = true;
    },
  },
};
</script>
<style lang="scss" scoped>
// include animation styles
@import "../../node_modules/vodal/common.css";
@import "../../node_modules/vodal/rotate.css";
</style>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
 

效果

文章来源: jiangwenxin.blog.csdn.net，作者：前端江太公，版权归原作者所有，如需转载，请联系作者。

原文链接：jiangwenxin.blog.csdn.net/article/details/108776582