Vue學習記錄--動畫

Vue中的動畫

使用過渡類名

HTML結構：

<div id="app">
    <input type="button" value="動起來" @click="myAnimate">
    <!-- 使用 transition 将需要過渡的元素包裹起來 -->
    <transition name="fade">
      <div v-show="isshow">動畫哦</div>
    </transition>
  </div>

VM 執行個體：

// 建立 Vue 執行個體，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    isshow: false
  },
  methods: {
    myAnimate() {
      this.isshow = !this.isshow;
    }
  }
});

定義兩組類樣式：

/* 定義進入和離開時候的過渡狀态 */
    .fade-enter-active,
    .fade-leave-active {
      transition: all 0.2s ease;
      position: absolute;
    }

    /* 定義進入過渡的開始狀态 和 離開過渡的結束狀态 */
    .fade-enter,
    .fade-leave-to {
      opacity: 0;
      transform: translateX(100px);
    }

過渡類名實作動畫

<!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>
  <!-- 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.8s ease;
    }




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

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

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


    <hr>

    <input type="button" value="toggle2" @click="flag2=!flag2">
    <transition name="my">
      <h6 v-if="flag2">這是一個H6</h6>
    </transition>
  </div>

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

</html>

使用第三方 CSS 動畫庫

導入動畫類庫：

<link rel="stylesheet" type="text/css" href="./lib/animate.css">

定義 transition 及屬性：

<transition
    enter-active-class="fadeInRight"
    leave-active-class="fadeOutRight"
    :duration="{ enter: 500, leave: 800 }">
    <div class="animated" v-show="isshow">動畫哦</div>
</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-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/animate.css">
  <!-- 入場 bounceIn    離場 bounceOut -->
</head>

<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 需求： 點選按鈕，讓 h3 顯示，再點選，讓 h3 隐藏 -->
    <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
      <h3 v-if="flag">這是一個H3</h3>
    </transition> -->

    <!-- 使用 :duration="毫秒值" 來統一設定 入場 和 離場 時候的動畫時長 -->
    <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
      <h3 v-if="flag" class="animated">這是一個H3</h3>
    </transition> -->

    <!-- 使用  :duration="{ enter: 200, leave: 400 }"  來分别設定 入場的時長 和 離場的時長  -->
    <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>
    // 建立 Vue 執行個體，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>
</body>

</html>

使用動畫鈎子函數

定義 transition 元件以及三個鈎子函數：

<div id="app">
    <input type="button" value="切換動畫" @click="isshow = !isshow">
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
      <div v-if="isshow" class="show">OK</div>
    </transition>
  </div>

定義三個 methods 鈎子方法：

methods: {
        beforeEnter(el) { // 動畫進入之前的回調
          el.style.transform = 'translateX(500px)';
        },
        enter(el, done) { // 動畫進入完成時候的回調
          el.offsetWidth;
          el.style.transform = 'translateX(0px)';
          done();
        },
        afterEnter(el) { // 動畫進入完成之後的回調
          this.isshow = !this.isshow;
        }
      }

使用鈎子函數模拟小球半場動畫

<!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>
    .ball {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <input type="button" value="快到碗裡來" @click="flag=!flag">
    <!-- 1. 使用 transition 元素把 小球包裹起來 -->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>
  </div>

  <script>

    // 建立 Vue 執行個體，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        // 注意： 動畫鈎子函數的第一個參數：el，表示 要執行動畫的那個DOM元素，是個原生的 JS DOM對象
        // 大家可以認為 ， el 是通過 document.getElementById('') 方式擷取到的原生JS DOM對象
        beforeEnter(el){
          // beforeEnter 表示動畫入場之前，此時，動畫尚未開始，可以 在 beforeEnter 中，設定元素開始動畫之前的起始樣式
          // 設定小球開始動畫之前的，起始位置
          el.style.transform = "translate(0, 0)"
        },
        enter(el, done){
          // 這句話，沒有實際的作用，但是，如果不寫，出不來動畫效果；
          // 可以認為 el.offsetWidth 會強制動畫重新整理
          el.offsetWidth
          // enter 表示動畫 開始之後的樣式，這裡，可以設定小球完成動畫之後的，結束狀态
          el.style.transform = "translate(150px, 450px)"
          el.style.transition = 'all 1s ease'

          // 這裡的 done， 起始就是 afterEnter 這個函數，也就是說：done 是 afterEnter 函數的引用
          done()
        },
        afterEnter(el){
          // 動畫完成之後，會調用 afterEnter
          // console.log('ok')
          this.flag = !this.flag
        }
      }
    });
  </script>
</body>

</html>

定義動畫過渡時長和樣式：

.show{
      transition: all 0.4s ease;
    }

v-for 的清單過渡

定義過渡樣式：

<style>
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(10px);
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 0.3s ease;
    }
</style>

定義DOM結構，其中，需要使用 transition-group 元件把v-for循環的清單包裹起來：

<div id="app">
    <input type="text" v-model="txt" @keyup.enter="add">

    <transition-group tag="ul" name="list">
      <li v-for="(item, i) in list" :key="i">{{item}}</li>
    </transition-group>
  </div>

定義 VM中的結構：

// 建立 Vue 執行個體，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        txt: '',
        list: [1, 2, 3, 4]
      },
      methods: {
        add() {
          this.list.push(this.txt);
          this.txt = '';
        }
      }
    });

清單的排序過渡

v-move 和 v-leave-active 結合使用，能夠讓清單的過渡更加平緩柔和：

.v-move{
  transition: all 0.8s ease;
}
.v-leave-active{
  position: absolute;
}

實作清單動畫

<!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>
    li {
      border: 1px dashed #999;
      margin: 5px;
      line-height: 35px;
      padding-left: 5px;
      font-size: 12px;
      width: 100%;
    }

    li:hover {
      background-color: hotpink;
      transition: all 0.8s ease;
    }



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

    .v-enter-active,
    .v-leave-active {
      transition: all 0.6s ease;
    }

    /* 下面的 .v-move 和 .v-leave-active 配合使用，能夠實作清單後續的元素，漸漸地漂上來的效果 */
    .v-move {
      transition: all 0.6s ease;
    }
    .v-leave-active{
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="app">

    <div>
      <label>
        Id:
        <input type="text" v-model="id">
      </label>

      <label>
        Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="添加" @click="add">
    </div>

    <!-- <ul> -->
      <!-- 在實作清單過渡的時候，如果需要過渡的元素，是通過 v-for 循環渲染出來的，不能使用 transition 包裹，需要使用 transitionGroup -->
      <!-- 如果要為 v-for 循環建立的元素設定動畫，必須為每一個 元素 設定 :key 屬性 -->
      <!-- 給 ransition-group 添加 appear 屬性，實作頁面剛展示出來時候，入場時候的效果 -->
      <!-- 通過 為 transition-group 元素，設定 tag 屬性，指定 transition-group 渲染為指定的元素，如果不指定 tag 屬性，預設，渲染為 span 标簽 -->
      <transition-group appear tag="ul">
        <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
          {{item.id}} --- {{item.name}}
        </li>
      </transition-group>
    <!-- </ul> -->

  </div>

  <script>
    // 建立 Vue 執行個體，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: '趙高' },
          { id: 2, name: '秦桧' },
          { id: 3, name: '嚴嵩' },
          { id: 4, name: '魏忠賢' }
        ]
      },
      methods: {
        add() {
          this.list.push({ id: this.id, name: this.name })
          this.id = this.name = ''
        },
        del(i) {
          this.list.splice(i, 1)
        }
      }
    });
  </script>
</body>

</html>

Vue學習記錄--動畫

Vue中的動畫

使用過渡類名

過渡類名實作動畫

使用第三方 CSS 動畫庫

使用第三方類實作動畫

使用動畫鈎子函數

使用鈎子函數模拟小球半場動畫

v-for 的清單過渡

清單的排序過渡

實作清單動畫

繼續閱讀

關于Gradle配置的小結

Java小案例——随機數猜測随機數猜測

nginx location中斜線的位置的重要性

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的簡單使用

neo4j之cypher使用文檔

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method

Vue學習記錄--動畫

​​Vue中的動畫​​

使用過渡類名

過渡類名實作動畫

​​使用第三方 CSS 動畫庫​​

使用第三方類實作動畫

使用動畫鈎子函數

使用鈎子函數模拟小球半場動畫

​​v-for 的清單過渡​​

清單的排序過渡

實作清單動畫

繼續閱讀

Vue中的動畫

使用第三方 CSS 動畫庫

v-for 的清單過渡