vue中實現模態框彈出框動畫（旋轉彈出）

vue模態框彈窗動畫

沃達爾 (Vodal) 
A Nice vue modal with animations.

帶有動畫的尼斯vue模態。 
安裝

                     npm i  -  S vodal  

用法

                      < 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  >  

效果 

道具 (Props )

Property	Type	Default	Description
width	number	400	width of dialog
height	number	240	height of dialog
measure	string	px	measure of width and height
show	bool	false	whether to show dialog
mask	bool	true	whether to show mask
closeButton	bool	true	whether to show close button
closeOnEsc	bool	false	whether close dialog when esc pressed
closeOnClickMask	bool	true	whether close dialog when mask clicked
animation	string	zoom	animation type
duration	number	300	animation duration
className	string	/	className for the container
customStyles	object	/	custom dialog styles
customMaskStyles	object	/	custom mask styles

屬性	類型	默認	描述
寬度	數	400	對話寬度
高度	數	240	對話高度
測量	串	像素	寬度和高度的度量
表演	布爾	假	是否顯示對話框
面具	布爾	真正	是否戴面具
closeButton	布爾	真正	是否顯示關閉按鈕
closeOnEsc	布爾	假	按下esc時是否關閉對話框
closeOnClickMask	布爾	真正	單擊蒙版時是否關閉對話框
動畫	串	放大	動畫類型
持續時間	數	300	動畫時長
班級名稱	串	/	容器的className
customStyles	目的	/	自定義對話框樣式
customMaskStyles	目的	/	自定義蒙版樣式

事件 (Event)

Name	Description
hide	triggers when dialog will hide
clickMask	triggers when mask clicked

名稱	描述
隱藏	對話框隱藏時觸發
clickMask	單擊蒙版時觸發

動畫類型 (Animation Types)

• zoom

  放大

• fade

  褪色

• flip

  翻轉

• door

  門

• rotate

  旋轉

• slideUp

  向上滑動

• slideDown

  滑下

• slideLeft

  向左滑動

• slideRight

  向右滑動