IT培訓-高端面授IT培訓機構
        
          
            云和教育：云和數據集團高端IT職業教育品牌
            
        
          
    
          

          



          
    
          
        
          
                        
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        
          
        
          
            
          
                
          
                    
            
                        
          • 
                            國家級
            全民數字素養與技能培訓基地            
                        
            • 
                        
          • 
                            河南省
            第一批產教融合型企業建設培育單位            
                        
            • 
                        
          • 
                            鄭州市
            數字技能人才（碼農）培養評價聯盟            
                        
            • 
                        
                    
          
                
          
            
          
        
          
    
          

          





          

          
    
          
        
                
          
            
          content生成自定義圖標的方式是什么？
          
            
            
                
          • 
                    
            發布時間：
            
                    
            2023-02-09
            
                
            • 
                
          • 
                    
            版權所有：
            
                    
            云和教育
            
                
            • 
                
          • 
                    
            分享：
            
                    
            
                        
                        
            
                            
                            
                            
                            
                            
                            
                            
                        
            
                        
                        
                    
            
                
            • 
            
          
            
          
                
          

          animate.css是一個跨瀏覽器的CSS3動畫庫，它內置了很多經典的CSS3動畫。使用起來很方便。下面我們通過例子講解如何使用自定義類名和animate.css庫實現動畫效果。
          

          (1)從animate.css官方網站獲取animate.css文件，保存到chapter04目錄中。
          

          (2)創建C:\vue\chapter04\demo02.html文件，引入animate.css，如下所示：
          

          <link rel="stylesheet" href="animate.css">
          

          (3)在demo02.html文件中編寫HTML結構，具體代碼如下：
          

          <div id="app">
  <button @click="show=!show">顯示/隱藏</button>
  <transition enter-active-class="animated bounceInLeft"
   leave-active-class="animated bounceOutLeft">
    <p v-if="show">過渡文字效果</div>
  </transition>
</div>
          

          上述代碼中，第3、4行給標簽設置了enter-active-class與leave-active-class兩個屬性，用來自定義類名，屬性值為animate.css動畫庫中定義好的類名。例如，第3行的“animated bounceInLeft”包含兩個類名，animated是基本的類名，任何想實現動畫的元素都要添加它;bounceInLeft是動畫的類名，bounceInLeft表示入場動畫，bounceOutLeft表示出場動畫。
          

          (4)在demo02.html文件中編寫JavaScript代碼，具體代碼如下：
          

          var vm = new Vue({ el: '#app', data: (show:true) })
          

          (5)保存代碼，在瀏覽器中運行程序。單擊“顯示/隱藏”按鈕，即可看到文字顯示或隱藏的動畫效果。