VueJS渲染

1. VueJS渲染

VueJS事件

1. VueJS事件

VueJS與其他框架比較

1. VueJS與其他框架比較

VueJS過(guò)渡和動(dòng)畫(huà)

1. VueJS過(guò)渡和動(dòng)畫(huà)

VueJS指令

1. VueJS指令

VueJS模板

1. VueJS模板

VueJS簡(jiǎn)介

1. VueJS簡(jiǎn)介

VueJS實(shí)例

1. VueJS實(shí)例

VueJS混合

1. VueJS混合

VueJS計(jì)算屬性

1. VueJS計(jì)算屬性

VueJS組件

1. VueJS組件

VueJS入門(mén)程序

1. VueJS入門(mén)程序

VueJS路由

1. VueJS路由

VueJS環(huán)境設(shè)置

1. VueJS環(huán)境設(shè)置

VueJS渲染函數(shù)

1. VueJS渲染函數(shù)

VueJS教程

1. VueJS教程

VueJS watch屬性

1. VueJS watch屬性

VueJS Reactive接口

1. VueJS Reactive接口

VueJS數(shù)據(jù)綁定

1. VueJS數(shù)據(jù)綁定

VueJS應(yīng)用示例

1. VueJS應(yīng)用示例

VueJS過(guò)渡和動(dòng)畫(huà)

在本章中，我們將討論VueJS中可用的過(guò)渡和動(dòng)畫(huà)功能。

過(guò)渡

當(dāng)在DOM中添加/更新HTML元素時(shí)，VueJS提供了各種方法來(lái)將轉(zhuǎn)換應(yīng)用到HTML元素。 VueJS有一個(gè)內(nèi)置的轉(zhuǎn)換組件，可將其包裝轉(zhuǎn)換到元素中。

語(yǔ)法

<transition name = "nameoftransition">
   <div></div>
</transition>

下面通過(guò)一個(gè)例子來(lái)理解過(guò)渡的工作。

示例

創(chuàng)建一個(gè)文件：transition.html -

<html>
   <head>
      <meta charset="UTF-8">
      <title>VueJS過(guò)渡示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .fade-enter-active, .fade-leave-active {
            transition: opacity 2s
         }
         .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">點(diǎn)擊我</button>
         <transition name = "fade">
            <p v-show = "show" v-bind:style = "styleobj">VueJS過(guò)渡示例</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true,
               styleobj :{
                  fontSize:'20px',
                  color:'red'
               }
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

有一個(gè)"點(diǎn)擊我"的按鈕，使用它可以將變量show的值更改為false，反之亦然。只有當(dāng)變量為true時(shí)，才有一個(gè)p標(biāo)簽顯示文本元素。下面的一段代碼所示的過(guò)渡元素包裝了p標(biāo)簽。

<transition name = "fade">
    <p v-show = "show" v-bind:style = "styleobj">VueJS過(guò)渡示例</p>
</transition>

過(guò)渡的名稱是fade。 VueJS為轉(zhuǎn)換提供了一些標(biāo)準(zhǔn)類，并且類以轉(zhuǎn)換的名稱作為前綴。

以下是一些轉(zhuǎn)換的標(biāo)準(zhǔn)類 -

v-enter - 這個(gè)類在元素被更新/添加之前被初始調(diào)用。它為開(kāi)始狀態(tài)。
v-enter-active - 此類用于定義進(jìn)入轉(zhuǎn)換階段的延遲，持續(xù)時(shí)間和緩動(dòng)曲線。這是整個(gè)活動(dòng)狀態(tài)，并且整個(gè)進(jìn)入階段都是可用的。
v-leave - 在離開(kāi)轉(zhuǎn)換被觸發(fā)時(shí)添加，刪除。
v-leave-active - 在離開(kāi)階段應(yīng)用。轉(zhuǎn)換完成后將被刪除。這個(gè)類用于在離開(kāi)階段應(yīng)用延遲，持續(xù)時(shí)間和緩和曲線。

上述每個(gè)類都將以轉(zhuǎn)換的名稱作為前綴。將過(guò)渡的名稱作為fade，因此類的名稱變?yōu)?code>.fade_enter，.fade_enter_active，.fade_leave，.fade_leave_active。

它們?cè)谙旅娴拇a中定義 -

<style>
   .fade-enter-active, .fade-leave-active {
      transition: opacity 2s
   }
   .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0
   }
</style>

.fade_enter_active和.fade_leave_active一起定義，并在開(kāi)始和離開(kāi)階段應(yīng)用轉(zhuǎn)換。不透明屬性在2秒內(nèi)變?yōu)?code>0。

持續(xù)時(shí)間在.fade_enter_active和.fade_leave_active中定義。最后一個(gè)階段是在.fade_enter，.fade_leave_to中定義的。

在瀏覽器顯示如下所示 -

下面再來(lái)看看另外一個(gè)例子，其中有一個(gè)圖像，當(dāng)點(diǎn)擊按鈕時(shí)，它在x軸上移動(dòng)。創(chuàng)建一個(gè)文件：transition-image.html -

<html>
   <head>
      <meta charset="UTF-8">
      <title>VueJS過(guò)渡示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active, .shiftx-leave-active {
            transition: all 2s ease-in-out;
         }
         .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
            transform :  translateX(100px);
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">點(diǎn)擊我</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/mydog.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

過(guò)渡的名字是shiftx。 transform屬性用于使用下面的一段代碼將x軸上的圖像移動(dòng)100px。

<style>
   .shiftx-enter-active, .shiftx-leave-active {
      transition: all 2s ease-in-out;
   }
   .shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
      transform :  translateX(100px);
   }
</style>

點(diǎn)擊按鈕，圖像將向右移動(dòng)100px，如下圖所示 -

動(dòng)畫(huà)

動(dòng)畫(huà)以與轉(zhuǎn)換完成相同的方式應(yīng)用。動(dòng)畫(huà)也有類需要聲明效果發(fā)生。

下面來(lái)看看一個(gè)例子，演示如何動(dòng)畫(huà)是如何工作的。創(chuàng)建一個(gè)文件：animations.html -

<html>
   <head>
   <meta charset="utf-8" />
      <title>VueJS動(dòng)畫(huà)示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .shiftx-enter-active {
            animation: shift-in 2s;
         }
         .shiftx-leave-active {
            animation: shift-in 2s reverse;
         }
         @keyframes shift-in {
            0%   {transform:rotateX(0deg);}
            25%  {transform:rotateX(90deg);}
            50%  {transform:rotateX(120deg);}
            75%  {transform:rotateX(180deg);}
            100% {transform:rotateX(360deg);}
         }
      </style>
      <div id = "databinding">
         <button v-on:click = "show = !show">點(diǎn)擊我</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "images/mydog.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show:true
            },
            methods : {
            }
         });
      </script>
   </body>
</html>

要應(yīng)用動(dòng)畫(huà)，類與轉(zhuǎn)換相同。在上面的代碼中，有一個(gè)以p標(biāo)簽封裝的圖像，如下面的一段代碼所示 -

<transition name = "shiftx">
   <p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;" /></p>
</transition>

過(guò)渡的名字是shiftx。所聲明的類如下 -

<style>
   .shiftx-enter-active {
      animation: shift-in 2s;
   }
   .shiftx-leave-active {
      animation: shift-in 2s reverse;
   }
   @keyframes shift-in {
      0%   {transform:rotateX(0deg);}
      25%  {transform:rotateX(90deg);}
      50%  {transform:rotateX(120deg);}
      75%  {transform:rotateX(180deg);}
      100% {transform:rotateX(360deg);}
   }
</style>

該類以轉(zhuǎn)換名稱作為前綴，即shiftx-enter-active和.shiftx-leave-active。動(dòng)畫(huà)是使用從0％到100％的關(guān)鍵幀定義的。在每個(gè)關(guān)鍵幀處定義的變換如下面的一段代碼所示。

@keyframes shift-in {
   0%   {transform:rotateX(0deg);}
   25%  {transform:rotateX(90deg);}
   50%  {transform:rotateX(120deg);}
   75%  {transform:rotateX(180deg);}
   100% {transform:rotateX(360deg);}
}

在瀏覽器中顯示效果如下 -

自定義轉(zhuǎn)換類

VueJS提供了自定義類的列表，可以將其作為屬性添加到過(guò)渡元素。

enter-class
enter-active-class
leave-class
leave-active-class

自定義類基本上是想要使用外部CSS庫(kù)(如：animate.css)時(shí)發(fā)揮作用。

創(chuàng)建一個(gè)文件：animations-custom.html -

<html>
   <head>
   <meta charset="utf-8" />
      <title>VueJs自動(dòng)定義過(guò)渡類</title>
      <link href = "http://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <button @click = "show = !show"><span style = "font-size:25px;">Animate</span></button>
         <transition
            name = "custom-classes-transition"
            enter-active-class = "animated swing"
            leave-active-class = "animated bounceIn">
            <p v-if = "show"><span style = "font-size:25px;">Example</span></p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

在瀏覽器中輸出結(jié)果如下 -

顯式轉(zhuǎn)換時(shí)間

可以使用VueJS在元素上應(yīng)用過(guò)渡和動(dòng)畫(huà)。Vue等待transionend和animationend事件來(lái)檢測(cè)動(dòng)畫(huà)或轉(zhuǎn)換是否完成。

有時(shí)候過(guò)渡可能會(huì)導(dǎo)致延遲。在這種情況下，可以明確地應(yīng)用這個(gè)持續(xù)時(shí)間如下 -

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

如上所示，可以在轉(zhuǎn)換元素上使用duration屬性。如果需要分別指定進(jìn)入和離開(kāi)的持續(xù)時(shí)間，可以按照上面的代碼所示完成。

JavaScript掛鉤

可以使用JavaScript事件將過(guò)渡類稱為方法。來(lái)看下以下一個(gè)更好理解的例子。創(chuàng)建一個(gè)文件：javascript-hooks.html -

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs Javascript掛鉤</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script src = "http://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
      <div id = "example-4">
         <button @click = "show = !show">
            <span style = "font-size:25px;">Toggle</span>
         </button>
         <transition  v-on:before-enter = "beforeEnter"
            v-on:enter = "enter"
            v-on:leave = "leave"
            v-bind:css = "false">
            <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#example-4',
            data: {
               show: false
            },
            methods: {
               beforeEnter: function (el) {
                  el.style.opacity = 0
               },
               enter: function (el, done) {
                  Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
                  Velocity(el, { fontSize: '10px' }, { complete: done })
               },
               leave: function (el, done) {
                  Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
                  Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                  Velocity(el, {
                     rotateZ: '45deg',
                     translateY: '30px',
                     translateX: '30px',
                     opacity: 0
                  }, { complete: done })
               }
            }
         });
      </script>
   </body>
</html>

在瀏覽器中，查看上面代碼運(yùn)行結(jié)果如下 -

在上面的例子中，使用js方法在轉(zhuǎn)換元素上執(zhí)行動(dòng)畫(huà)。轉(zhuǎn)換的方法應(yīng)用如下 -

<transition  v-on:before-enter = "beforeEnter"
   v-on:enter = "enter"
   v-on:leave = "leave"
   v-bind:css = "false">
   <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>

有一個(gè)前綴添加v-on和該方法被調(diào)用的事件的名稱。這些方法在Vue實(shí)例中定義如下 -

methods: {
   beforeEnter: function (el) {
      el.style.opacity = 0
   },
   enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
      Velocity(el, { fontSize: '10px' }, { complete: done })
   },
   leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
         rotateZ: '45deg',
         translateY: '30px',
         translateX: '30px',
         opacity: 0
      }, { complete: done })
   }
}

初始渲染過(guò)渡

在在開(kāi)始時(shí)添加動(dòng)畫(huà)，需要為過(guò)渡元素添加“出現(xiàn)”屬性。

我們來(lái)看一個(gè)例子以更好地理解它。創(chuàng)建一個(gè)文件：initial-render.html -

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs初始化渲染</title>
      <link href = "http://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "animate" style = "text-align:center">
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated bounceIn">
            <h2>BounceIn - Animation Example</h2>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated swing">
            <h2>Swing - Animation Example</h2>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated rubberBand">
            <h2>RubberBand - Animation Example</h2>
         </transition>
      </div>
      <script type = "text/javascript">
         var vm =  new Vue({
            el: '#animate',
            data: {
               show: true
            }
         });
      </script>
   </body>
</html>

在上面的例子中，使用了animate.css庫(kù)中的三個(gè)不同的動(dòng)畫(huà)。并且已經(jīng)添加到過(guò)渡元素。
在執(zhí)行上面的代碼時(shí)，瀏覽器中的輸出效果是 -

上一篇：VueJS與其他框架比較

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

VueJS過(guò)渡和動(dòng)畫(huà)

過(guò)渡

示例

動(dòng)畫(huà)

自定義轉(zhuǎn)換類

JavaScript掛鉤

初始渲染過(guò)渡