快捷導(dǎo)航

Vue入門之a(chǎn)nimate過渡動(dòng)畫效果

更新時(shí)間：2018年04月08日 14:34:45 作者：銳小6

這篇文章主要介紹了Vue入門之a(chǎn)nimate過渡動(dòng)畫效果的相關(guān)資料,需要的朋友可以參考下

簡介：

transition方法的使用
transition內(nèi)置方法
transition-group

animate庫實(shí)現(xiàn)過渡動(dòng)畫

<!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" href="lib\animate.css" rel="external nofollow" >
  <style>
    [v-cloak] {
      display: none;
    }
    p {
      width: 100px;
      height: 100px;
      background: red;
      margin: 10px auto;
    }
    /* .fade-enter-active, .fade-leave-active {
      transition: 1s all ease;
    }
    .fade-enter-active {
      opacity: 1;
      width: 300px;
      height: 300px;
    }
    .fade-leave-active {
      opacity: 0;
      width: 100px;
      height: 100px;
    }
    .fade-enter, .fade-leave {
      width: 100px;
      height: 100px;
      opacity: 0;
    } */
  </style>
  <script>
    window.onload = function() {
      new Vue({
        el: '#box',
        data: {
          show: '',
          list: ['apple', 'banana', 'orange', 'pear']
        },
        computed: {
          lists: function() {
            var arr = [];
            this.list.forEach(function(val) {
              if (val.indexOf(this.show) != -1) {
                arr.push(val);
              }
            }.bind(this))
            return arr;
          }
        }
      })
    }
  </script>
</head>
<body>
  <div id="box" v-cloak>
    <input type="text" v-model="show">
    <!-- class定義 .fade
      .fade-enter{}      初始狀態(tài)
      .fade-enter-active{}   進(jìn)入過程
      .fade-leave{}      離開狀態(tài)
      .fade-leave-active{}   離開過程
    -->
    <transition-group enter-active-class="zoomInLeft" leave-active-class="bounceOutRight">
      <!-- 內(nèi)置方法
        @before-enter = "beforeEnter"
        @enter = "enter"
        @after-enter = "afterEnter"
        @before-leave = "beforeLeave"
        @leave = "leave"
        @after-leave = "afterLeave"
      -->
      <!-- transition-group 多個(gè)元素運(yùn)動(dòng)，注意綁定key:1 -->
      <p v-show="show" class="animated" v-for="(val, index) in lists" :key="index">
        {{val}}
      </p>  
    </transition-group>
  </div>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的Vue入門之a(chǎn)nimate過渡動(dòng)畫效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue?按需引入vant跟全局引入方式
這篇文章主要介紹了vue?按需引入vant跟全局引入方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
詳解Vue適時(shí)清理keepalive緩存方案
說到Vue緩存，我們肯定首先選擇官方提供的緩存方案keep-alive，本文主要介紹了詳解Vue適時(shí)清理keepalive緩存方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
vue百度地圖通過地址名稱獲取地址的經(jīng)緯度gps問題(具體步驟)
在Vue項(xiàng)目中，可以通過使用百度地圖JavaScript?API來實(shí)現(xiàn)根據(jù)地址名稱獲取經(jīng)緯度GPS的功能，本文分步驟給大家詳細(xì)講解vue百度地圖獲取經(jīng)緯度的實(shí)例，感興趣的朋友一起看看吧
2023-05-05
vue事件修飾符和按鍵修飾符用法總結(jié)
本篇文章主要介紹了vue事件修飾符和按鍵修飾符用法總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
Vue數(shù)據(jù)表格增刪改查與表單驗(yàn)證代碼詳解
這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)表格增刪改查與表單驗(yàn)證的相關(guān)資料,Vue可以通過使用組件化的方式來實(shí)現(xiàn)表格的增刪改查功能,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-10-10
使用Vue和ECharts創(chuàng)建交互式圖表的代碼示例
在現(xiàn)代 Web 應(yīng)用中,數(shù)據(jù)可視化是一個(gè)重要的組成部分,它不僅能夠幫助用戶更好地理解復(fù)雜的數(shù)據(jù),還能提升用戶體驗(yàn),本文給大家使用Vue和ECharts創(chuàng)建交互式圖表的示例,需要的朋友可以參考下
2024-11-11
Vue3啟用gzip壓縮nginx配置詳解
這篇文章主要為大家介紹了Vue3啟用gzip壓縮時(shí)nginx配置gzip示例詳解詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
vue 添加vux的代碼講解
通過命令npm install vux --save添加vux，在相關(guān)配置文件中配置信息，具體代碼添加方法，大家參考下本文
2017-11-11
vue中map()快速使用方法小結(jié)
map()函數(shù)是在JS的數(shù)組中定義的,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
前端vue中實(shí)現(xiàn)嵌入代碼編輯器的詳細(xì)代碼
隨著Web技術(shù)的不斷發(fā)展,前端開發(fā)也正日新月異,下面這篇文章主要給大家介紹了關(guān)于前端vue中實(shí)現(xiàn)嵌入代碼編輯器的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07