免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

詳解Vue中過度動畫效果應(yīng)用

一、實現(xiàn)動畫過渡效果的幾種方式

為葉城等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及葉城網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計制作、做網(wǎng)站、葉城網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

實現(xiàn)動畫必須要將要進行動畫的元素利用<transition>標簽進行包裹

1、利用CSS樣式實現(xiàn)過渡效果

 <transition name="fade"></transition>

1.v-enter: 定義進入過渡的開始狀態(tài)。在元素被插入時生效，在下一個幀移除。

2.v-enter-active: 定義進入過渡的結(jié)束狀態(tài)。在元素被插入時生效，在 transition/animation 完成之后移除。

3.v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時生效，在下一個幀移除。

4.v-leave-active: 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)時生效，在 transition/animation 完成之后

詳解Vue中過度動畫效果應(yīng)用

通過name的名稱進行重命名，在樣式文件中進行.fade-enter-active設(shè)置動畫的效果即transition屬性，需要注意的是動畫結(jié)束后樣式將會移除，所以如果想要動畫實現(xiàn)之后元素保持有某個樣式，則需要transition標簽里面的元素的樣式表中進行設(shè)置，此情況是針對元需要通過改變元素的屬性來顯示元素，如定位top，left以及通過transform將顯示的元素的位置改變從而讓元素出現(xiàn)在當前的視圖窗口中時，但是如果元素v-show為true之后元素已經(jīng)在視圖中央顯示了，不需要位置的移動將元素移動到視圖中，只是想要顯示的時候顯示有動畫效果的，則直接將動畫結(jié)束的屬性設(shè)置在v-enter-active/v-leave-active中即可。也就是說動畫的屬性如果只是產(chǎn)生效果，不對元素的任何屬性進行修改，也就是動畫中的屬性樣式不需要永久添加到dom元素中，則直接按后者的方式定義，如果說動畫的屬性同時相對元素進行樣式設(shè)計，屬性樣式需要被添加到dom元素上，則需要按照前者的方式。

<transition name="fold">
    <div class="shopcart-list" v-show="listShow">
     <div class="list-header">
      <h2 class="title">購物車</h2>
      <span class="empty" @click="empty">清空</span>
     </div>
     <div class="list-content" ref="list">
      <ul>
       <li class="food border-1px" v-for="(food,index) in selectFoods" v-show="food.count>0">
        <span class="name">{{selectName[index]}}</span>
        <div class="price">
         <span>￥{{food.price*food.count}}</span>
        </div>
        <div class="cartcontrol-wrapper">
         <v-cartcontrol :food="food"></v-cartcontrol>
        </div>
       </li>
      </ul>
     </div>
    </div>
   </transition>
 .fold-enter-active,.fold-leave-active
   transition:all 0.5s
  .fold-enter,.fold-leave
   transform :translate3d(0,0,0)
  .shopcart-list
   position:absolute
   transform:translate3d(0,-100%,0)//動畫結(jié)束后的效果需要在此處進行設(shè)置，設(shè)置在.fold-enter-active中，元素動畫結(jié)束后該樣式屬性會被移除掉，將會看不到想要的效果
   top: 100%//元素即使顯示也不再視圖窗口中，通過transform實現(xiàn)顯示
   z-index:-1
   width:100%

2、利用animation或者是動畫庫實現(xiàn)動畫效果

<div id="example-2">
 <button @click="show = !show">Toggle show</button>
 <transition name="bounce">
  <p v-if="show">Look at me!</p>
 </transition>
</div>
new Vue({
 el: '#example-2',
 data: {
  show: true
 }
})
.bounce-enter-active {
 animation: bounce-in 0.5s linear;
}
.bounce-leave-active {
 animation: bounce-out 0.5s linear;
}
@keyframes bounce-in {
 0% {
  transform: scale(0);
 }
 50% {
  transform: scale(1.5);
 }
 100% {
  transform: scale(1);
 }
}
@keyframes bounce-out {
 0% {
  transform: scale(1);
 }
 50% {
  transform: scale(1.5);
 }
 100% {
  transform: scale(0);
 }
}

3、自定義過度類名

  1. enter-class
  2. enter-active-class
  3. leave-class
  4. leave-active-class

 他們的優(yōu)先級高于普通的類名，這對于 Vue 的過渡系統(tǒng)和其他第三方 CSS 動畫庫，如 Animate.css 結(jié)合使用十分有用。

<link  rel="external nofollow" rel="stylesheet" type="text/css">

<div id="example-3">

 <button @click="show = !show">

  Toggle render

 </button>

 <transition

  name="custom-classes-transition"

  enter-active-class="animated tada"

  leave-active-class="animated bounceOutRight"

 >

  <p v-if="show">hello</p>

 </transition>

</div> 

new Vue({
 el: '#example-3',
 data: {
  show: true
 }
})

可以在樣式中同時使用transition和animation

4、利用JavaScript鉤子函數(shù)實現(xiàn)過渡效果

<transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled"
 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 v-on:leave-cancelled="leaveCancelled"
>
 <!-- ... -->
</transition>
methods: {
 // --------
 // 進入中
 // --------
 beforeEnter: function (el) {
  // ...
 },
 // 此回調(diào)函數(shù)是可選項的設(shè)置
 // 與 CSS 結(jié)合時使用
 enter: function (el, done) {
  // ...
  done()
 },
 afterEnter: function (el) {
  // ...
 },
 enterCancelled: function (el) {
  // ...
 },
 // --------
 // 離開時
 // --------
 beforeLeave: function (el) {
  // ...
 },
 // 此回調(diào)函數(shù)是可選項的設(shè)置
 // 與 CSS 結(jié)合時使用
 leave: function (el, done) {
  // ...
  done()
 },
 afterLeave: function (el) {
  // ...
 },
 // leaveCancelled 只用于 v-show 中
 leaveCancelled: function (el) {
  // ...
 }
}

在使用鉤子函數(shù)實現(xiàn)動畫的時候注意dom的異步刷新，需要結(jié)合this.$nextTick()，同時在leave和enter中設(shè)置樣式前最好迫使dom進行回流（reflow）使dom重新渲染，如獲取元素的offsetHeight等，然后在this.$nextTick（）中設(shè)置新的樣式，不然又可能實現(xiàn)不了動畫的效果

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章名稱：詳解Vue中過度動畫效果應(yīng)用
新聞來源：http://m.newbst.com/article24/ggpeje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、小程序開發(fā)、網(wǎng)站排名、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計