VUE引用animate.css动画库

VUE引用animate.css动画库

$ npm install animate.css --save

main.js里

require( 'animate.css/animate.min.css');

然后就可以到vue文件里直接引用了；

  < div  class= "click-me-con animated bounceInDown"  v-show= "showRedPack" >

       < img  src= "../assets/img/gift/clickme-base.png"  class= "click-me" @ click= "showNav" >

       < div  class= "close" @ click= "closeRedPack" >

         < img  src= "../assets/img/gift/clickme-close.png"  class= "click-me-close" >

       </ div >

     </ div >

     < div  class= "marketing-mask"  v-if= "showTitle" >

       < div  class= "marketing-content-con" >

大家好

       </ div >

<div class="none">

关闭

</div>

     </ div >

   showRedPack:  true,

         showTitle:  false,

    showNav:  function () {

         this. showTitle =  true;

         setTimeout( function () {

           var  nav =  document. querySelectorAll( '.marketing-content-con')[ 0];

           nav. style. top= "0px";

           nav. style. transition= "top .5s";

        }, 100)

      },

遮罩：

.marketing-mask {

     width:  100%;

     height:  100%;

     background:  rgba(  0,  0,  0,  .8);

     position:  fixed;

     z-index:  10;

     top:  0;

     left:  0;

  }

  .marketing-content-con {

     width:  100%;

     background:  #fff;

     position:  absolute;

     top:  -370px;

     padding-bottom:  0.4rem;

     padding-top:  0.2rem;

  }