VUE引用animate.css动画库

VUE引用animate.css动画库$ npm install animate.css --savemain.js里require('animate.css/animate.min.css');然后就可以到vue文件里直接引用了； div class="click-me-con animated bounceInDown" v-show="show

晴天Smile

7184人浏览 · 2017-09-06 11:33:28

晴天Smile · 2017-09-06 11:33:28 发布

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