整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          絢麗的效果肯定需要動畫的支持,Vue動畫入門開篇

          ?在我們顯示的頁面中動畫對于我們來說雖然不是必須的,但是必要的一些動畫效果能夠提高用戶的體驗,幫助用戶更好的理解頁面中的功能。所以本文就來給大伙介紹下動畫的基礎內容。

          Vue 動畫

          不帶動畫效果的案例

          ??我們先來實現一個不帶動畫效果的顯示和隱藏的功能。
          案例代碼

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <meta http-equiv="X-UA-Compatible" content="ie=edge">
              <title>Document</title>
              <script src="./lib/vue-2.4.0.js"></script>
          </head>
          <body>
          
              <div id="app">
                  <input type="button" value="開關" @click="flag=!flag">
          
                  <h3 v-if="flag">這是一個h3</h3>
              </div>
              <script>
                  var vm = new Vue({
                      el: "#app",
                      data: {
                          flag: false
                      },
                      methods: {
          
                      }
                  })
              </script>
          </body>
          </html>
          

          效果

          在這里插入圖片描述

          效果雖然實現了,但是效果并不是太好。

          過渡類名實現動畫

          ??Vue 在插入、更新或者移除 DOM 時,我們可以在 CSS 過渡和動畫中自動應用 class,

          在這里插入圖片描述

          過渡類

          說明

          v-enter

          這是一個時間點,是進入之前,
          元素的起始狀態,此時還沒有開始進入

          v-enter-active

          入場動畫的時間段

          v-enter-to

          入場結束的時間點

          v-leave

          離場動畫開始的時間點

          v-leave-active

          離場動畫的時間段

          v-leave-to

          這是一個時間點,是動畫離開之后,
          離開的終止狀態,此時,元素 動畫已經結束了

          具體使用

          1.要使用過渡動畫效果的元素 必須被 transition標簽包裹

          在這里插入圖片描述

          2.定義對應的樣式

          在這里插入圖片描述

          完整代碼

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <meta http-equiv="X-UA-Compatible" content="ie=edge">
              <title>Document</title>
              <script src="./lib/vue-2.4.0.js"></script>
              <style>
                  /**opacity 透明度  transform :https://www.cnblogs.com/xiaomifeng/p/9139632.html**/
                  .v-enter,
                  .v-leave-to {
                      opacity: 0;
                      transform: translateX( 150px )
                  }
          
                  .v-enter-active,
                  .v-leave-active {
                      transition: all 1s ease
                  }
              </style>
          </head>
          <body>
          
              <div id="app">
                  <input type="button" value="開關" @click="flag=!flag">
                  <transition>
                      <h3 v-if="flag">這是一個h3</h3>
                  </transition>
              </div>
              <script>
                  var vm = new Vue({
                      el: "#app",
                      data: {
                          flag: false
                      },
                      methods: {
          
                      }
                  })
              </script>
          </body>
          </html>
          

          效果

          在這里插入圖片描述

          定義transition名稱

          ??對于沒有定義的transition名稱的類名默認前綴是 v-,但如果我們想要自定義前綴,那么可以給transition設置個那么屬性,比如:

          在這里插入圖片描述

          在這里插入圖片描述

          效果還是一樣的。

          通過第三方類來實現動畫

          ??通過案例中我們需要自定動畫效果,這個會顯得有點麻煩,這時我們可以使用別人已經定義的動畫效果,比如Animate.css來實現,https://daneden.github.io/animate.css/ 官網效果

          在這里插入圖片描述

          是不是提供的效果蠻多的呀,我們就來看看具體怎么用吧。

          • 引入資源樣式

          在這里插入圖片描述

          可以自行在官網下載 在transition中添加對應的樣式

          在這里插入圖片描述

          https://github.com/daneden/animate.css 具體的樣式類可以在此頁面選擇

          在這里插入圖片描述

          注意:duration="毫秒值" 來統一設置 入場離場 時候的動畫時長

          完整代碼:

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <meta http-equiv="X-UA-Compatible" content="ie=edge">
              <title>Document</title>
              <script src="./lib/vue-2.4.0.js"></script>
              <link rel="stylesheet" href="./lib/animate.css">
          </head>
          <body>
          
              <div id="app">
                  <input type="button" value="開關" @click="flag=!flag">
                  <transition 
                      enter-active-class="bounceIn" 
                      leave-active-class="bounceOut" 
                      :duration="{ enter: 200, leave: 400 }">
                      <h3 v-if="flag" class="animated">這是一個H3</h3>
                  </transition> 
              </div>
              <script>
                  var vm = new Vue({
                      el: "#app",
                      data: {
                          flag: false
                      },
                      methods: {
          
                      }
                  })
              </script>
          </body>
          </html>
          

          效果

          在這里插入圖片描述

          演示效果不是太理想,工具原因,感興趣的小伙伴可自行運行哦。

          ?上篇文章我們介紹了過渡動畫的實現,包括完整的 入場離場 動畫,但是在實際過程中我們有時可能僅僅需要使用半場動畫,比如淘寶購物車的下單處理等。

          在這里插入圖片描述

          ?前面給大家介紹了動畫的基本使用,本文我們來實現一個動畫的簡單案例,效果如下

          在這里插入圖片描述

          Vue動畫案例

          1.基礎頁面

          ??最基礎的頁面如下:

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <meta http-equiv="X-UA-Compatible" content="ie=edge">
              <title>Document</title>
              <script src="./lib/vue-2.4.0.js"></script>
          </head>
          <body>
              <div id="app">
          
              </div>
              <script>
                  var vm = new Vue({
                      el: "#app",
                      data: {
          
                      },
                      methods: {
          
                      }
                  })
              </script>
          </body>
          </html>
          

          2.添加數據

          ??添加一個基本的列表數據,此處使用到 v-for 指令來循環取數據

          在這里插入圖片描述

          效果:

          在這里插入圖片描述

          3.設置樣式

          ??給 li 標簽設置對應的樣式。

          <style>
              li{
                  border: 1px dashed red;
                  margin-top: 5px;
                  line-height: 40px;
                  padding-left: 10px;
              }
          </style>
          

          效果

          在這里插入圖片描述

          4.添加背景動畫

          ??給列表數據添加一個鼠標滑過的 hover 動畫效果

          <style>
              li{
                  border: 1px dashed red;
                  margin-top: 5px;
                  line-height: 40px;
                  padding-left: 10px;
              }
              /*鼠標滑過的動畫*/
              li:hover{
                  background-color: aquamarine;
                  transition: all 0.8s ease;
              }
          </style>
          

          效果

          在這里插入圖片描述

          5.添加數據

          ??增加一個給列表添加數據功能,之前已經實現過了,代碼如下

          在這里插入圖片描述

          在這里插入圖片描述

          效果

          在這里插入圖片描述

          6.添加數據動畫

          ??上面的效果功能是實現了,但是效果比較生硬,我們可以加上動畫效果,要使用動畫之前我們使用的是 transition 標簽,但是現在是在 v-for 中循環遍歷的多個 li 標簽中 我們需要使用 transition-group 標簽來包裹.

          在這里插入圖片描述

          動畫代碼

          在這里插入圖片描述

          效果

          在這里插入圖片描述

          有了一個列滑動入場的效果~

          7.刪除數據

          ??當我們點擊某行數據的時候將這行移除掉,先給 li 綁定一個點擊事件,然后del方法中移除當前行

          在這里插入圖片描述

          效果

          在這里插入圖片描述

          如上,移除有些停頓,不是太好,我們可以加如下兩個動畫來實現。

          在這里插入圖片描述


          效果

          在這里插入圖片描述


          移除一個列的時候,下面的列有往上飄的效果~

          8.appear和tag屬性

          ??我們在刷新頁面,第一次進來的時候,列表沒有入場動畫,這時我們可以添加一個 appear屬性來設置

          在這里插入圖片描述

          最后 transition-group中還有一個 tag屬性,用來設置包裹的標簽,先來看沒有tag的效果

          在這里插入圖片描述

          我們使用tag屬性來試試

          在這里插入圖片描述

          在這里插入圖片描述

          這樣就沒有 span 中間的 標簽了。

          最后完成的代碼如下:


          主站蜘蛛池模板: 欧美成人aaa片一区国产精品| 日本免费电影一区二区| 一区二区三区高清视频在线观看| 久久se精品一区精品二区国产| 99精品国产高清一区二区麻豆| 福利一区福利二区| 无码人妻av一区二区三区蜜臀 | 无码视频一区二区三区| 91在线一区二区| 亚洲欧洲一区二区| 久久综合精品不卡一区二区| 激情综合一区二区三区| 一区二区三区在线看| 国产成人一区二区三区精品久久| 久久精品日韩一区国产二区| 国产乱码一区二区三区四 | 亚洲日韩国产一区二区三区| 精品一区二区AV天堂| 国产精品无码一区二区三区免费 | 无码日韩精品一区二区免费暖暖| 久久精品人妻一区二区三区| 国产高清在线精品一区二区| 亚洲熟女乱综合一区二区| 日本一区二区在线不卡| 国产成人精品一区二区三区| 亚洲毛片不卡av在线播放一区| 亚洲国产精品一区二区第四页 | 亚洲AV成人精品一区二区三区| 99久久无码一区人妻a黑| 亚洲欧美日韩中文字幕在线一区| 亚洲丰满熟女一区二区哦| 国精产品一区一区三区MBA下载| 无码午夜人妻一区二区不卡视频| 在线电影一区二区| 国产精品毛片a∨一区二区三区 | 精品视频一区二区三区四区 | 三上悠亚一区二区观看| 国产成人精品一区二区秒拍 | 无码国产精品一区二区免费式直播 | 色精品一区二区三区| 中文字幕一区二区三区日韩精品|