絢麗的效果肯定需要動畫的支持，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 中間的標簽了。

最后完成的代碼如下:

在線咨詢

上一篇：「前端制作」移動端側邊滑出導航欄
下一篇：初識HTML5(基礎篇)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

Vue 動畫

不帶動畫效果的案例

過渡類名實現動畫

具體使用

定義transition名稱

通過第三方類來實現動畫

Vue動畫案例

1.基礎頁面

2.添加數據

3.設置樣式

4.添加背景動畫

5.添加數據

6.添加數據動畫

7.刪除數據

8.appear和tag屬性

您的項目需求