Vue學習3——動畫1

阿新 • • 發佈：2021-01-06

Vue學習3——動畫

動畫方式1——使用過度類名實現動畫
使用 transition 包裹需要使用動畫的元素
可以使用name命名<transition>，在<style>中即可使用 name- 替代v- 進行特定元素的動畫

<!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.js"></script>
    <!-- 2.自定義兩組樣式,來控制transition內部的元素實現動畫 -->
    <style>
        /* v-enter [這是一個時間點] 是進入之前，元素的起始狀態，此時還沒有開始進入 */ 

        /* v-leave-to [這是一個時間點] 是動畫離開之後，離開的終止狀態，此時元素動畫已經結束 */
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(150px);
        }

        /* v-enter-active [入場動畫的時間段] */
        /* v-leave-active [離場動畫的時間段] */
        .v-enter-active,
        .v-leave-active 
 {
            transition: all 0.4s ease;
        }

        .my-enter,
        .my-leave-to {
            opacity: 0;
            transform: translateY(150px);
        }

        .my-enter-active,
        .my-leave-active {
            transition: all 0.4s ease;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="button" value="點選" @click="flag=!flag">
        <!-- 1.使用transition元素，把 需要被動畫控制的元素，包裹起來 -->
        <!-- transition土元素是Vue官方提供的 -->
        <transition>
            <h3 v-if="flag">這是一個H3</h3>
        </transition>

        <hr>

        <input type="button" value="點選2" @click="flag2=!flag2">
        <!-- 1.使用transition元素，把 需要被動畫控制的元素，包裹起來 -->
        <!-- transition土元素是Vue官方提供的 -->
        <transition name="my">
            <h3 v-if="flag2">這是一個H3</h3>
        </transition>


    </div>

    <script>
        //建立Vue例項,得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,
                flag2: false
            },
            methods: {}
        });
    </script>
</body>

</html>

動畫方式2 使用第三方類實現動畫
這裡使用的是animate.css

自定義過渡類名

可以用 <transition> 元件上的 duration定製一個顯性的過渡持續時間 (以毫秒計)：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

<!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.js"></script>
    <link rel="stylesheet" type="text/css" href="./lib/animate.css">
    <link rel="stylesheet" type="text/css" href="./lib/animate.min.css">
    <!-- 入場使用bounceIn  離場 bounceOut -->
</head>

<body>
    <div id="app">
        <!-- <input type="button" value="點選" @click="flag=!flag">
        <transition enter-active-class="animate__bounceIn" leave-active-class="animate__bounceOut">
            <h3 v-if="flag">這是一個H3</h3>
        </transition> -->
        <input type="button" value="點選" @click="flag=!flag">
        <transition enter-active-class="animate__bounceIn" leave-active-class="animate__bounceOut"
            :duration="{enter:200,leave:400}">
            <h3 v-if="flag">這是一個H3</h3>
        </transition>

        <!-- 使用duration="{enter:200,leave:400}" 分別來設定 入場的時長  和  離場的時長 -->
    </div>

    <script>
        //建立Vue例項,得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        });
    </script>
</body>

</html>

Vue學習3——動畫1

Vue學習3——動畫動畫方式1——使用過度類名實現動畫使用 transition 包裹需要使用動畫的元素可以使用name命名<transition>，在<style>中即可使用 name- 替代v- 進行特定元素的動畫

vue-cli 3.0.1 詳細入門教程

vue-cli 3.0.1 詳細入門教程請事先裝好nodeJs 一、安裝vue-cli npm install -g @vue/cli # or yarn global add @vue/cli

vue學習筆記之Vue中css動畫原理簡單示例

本文例項講述了Vue中css動畫原理。分享給大家供大家參考，具體如下：當transition包裹了一個元素之後，vue會自動分析元素的css樣式，構建動畫流程。

ol7.7安裝部署4節點hadoop 3.2.1分散式叢集學習環境的詳細教程

準備4臺虛擬機器，安裝好ol7.7，分配固定ip192.168.168.11 12 13 14，其中192.168.168.11作為master，其他3個作為slave，主節點也同時作為namenode的同時也是datanode，192.168.168.14作為datanode的同時也作為secon

vue學習記錄1

一、通過腳手架安裝建立vue專案 1、安裝vue腳手架 npm install -g @vue/cli 2、通過命令 vue create 專案名稱來建立vue基礎專案

OpenCV4學習筆記（1）原始碼編譯安裝 | OpenCV4.3.0以及Contrib | Win10 | CMake-GUI | VS2019 | HTTP代理

目錄目標ATTENTION！下載CMake、配置CMake環境變數、下載OpenCV和OpenCV_Contrib原始碼、下載VS2019下載CMake配置CMake環境變數下載OpenCV和OpenCV_Contrib原始碼下載OpenCV原始碼下載OpenCV_Contrib原始碼下載VS201