欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue動(dòng)畫(huà)—通過(guò)鉤子函數(shù)實(shí)現(xiàn)半場(chǎng)動(dòng)畫(huà)操作

 更新時(shí)間：2020年08月09日 09:40:42   作者：何遲  
這篇文章主要介紹了vue動(dòng)畫(huà)—通過(guò)鉤子函數(shù)實(shí)現(xiàn)半場(chǎng)動(dòng)畫(huà)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

注意：

1.起始位置設(shè)置了一個(gè)（0，0）在第一遍執(zhí)行時(shí)，是沒(méi)有作用的。在一次入場(chǎng)動(dòng)畫(huà)執(zhí)行完成之后，在最終位置停下來(lái)并不在起始位置，通過(guò)這里的位置的設(shè)置可以將入場(chǎng)動(dòng)畫(huà)結(jié)束時(shí)的位置調(diào)到這里

2.理解enter()函數(shù)的el的指代對(duì)象和done()指代的回調(diào)函數(shù)

3.理解this.show = !this.show，這句話有兩個(gè)作用。一是：控制顯示和隱藏，二是：false —> true為半場(chǎng)動(dòng)畫(huà)，true—>false又是為另半場(chǎng)動(dòng)畫(huà)。這樣就能完成一直循環(huán)執(zhí)行半場(chǎng)動(dòng)畫(huà)的效果了。

HTML代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../lib/vue.js"></script>
</head>
<style>
 .ball{
  margin: 50px 50px;
  width: 15px;
  height: 15px;
  border-radius: 50px;
  background-color: brown;
 }
</style>
<body>
  <div id="app">
   <input type="button" value="跳進(jìn)籃子里" v-on:click="show=!show">
   
   <transition
    v-on:before-enter="bEnter"
    v-on:enter="enter"
    v-on:after-enter="aEnter">
    <div class="ball" v-show="show"></div>
   </transition>
  </div>
 
  <script>
   var vm = new Vue({
    el:'#app', 
    data:{
     show:false
    },
    methods:{
     bEnter(el){
      el.style.transform = "translate(0,0)"
      //表示動(dòng)畫(huà)入場(chǎng)之前，坐標(biāo)表示位置是在起始位置不動(dòng) 
      //在一次入場(chǎng)動(dòng)畫(huà)執(zhí)行完成之后，在最終位置停下來(lái)并不在起始位置，通過(guò)這里的位置的設(shè)置可以將入場(chǎng)動(dòng)畫(huà)結(jié)束時(shí)的位置調(diào)到這里 
     },
     enter(el,done){
      el.offsetTop;
      //必須要寫(xiě)一下offsetTop，offsetWeith等四種中的其中一種，強(qiáng)制刷新動(dòng)畫(huà)
      el.style.transform = "translate(200px,450px)";
      el.style.transition = "all 2s ease";
      
      done()
      //done是enter方法的原生的引用函數(shù)名，這里表示是回調(diào)函數(shù)，也就是接下來(lái)執(zhí)行的操作aEnter（），消滅延遲效果。 
     },
     aEnter(el){
      this.show = !this.show;
     }
    }
    //這里的el代表，將要執(zhí)行半場(chǎng)動(dòng)畫(huà)的對(duì)象，是第一個(gè)原生的參數(shù)，跟自定義指令的el作用是一樣的 
   });
  </script>
</body>
</html>

效果：

補(bǔ)充知識(shí)：vue動(dòng)畫(huà)只有離場(chǎng)動(dòng)畫(huà)，進(jìn)場(chǎng)動(dòng)畫(huà)不生效

存在問(wèn)題的圖：（只有離場(chǎng)動(dòng)畫(huà)，進(jìn)場(chǎng)動(dòng)畫(huà)不生效）

解決之后效果圖：

解決辦法：

在transition標(biāo)簽中加入appear屬性

<template>
 <transition mode="out-in" appear>
  <div class="singer-detail">
  </div>
 </transition>
</template>

以上這篇vue動(dòng)畫(huà)—通過(guò)鉤子函數(shù)實(shí)現(xiàn)半場(chǎng)動(dòng)畫(huà)操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論