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

vue動畫—通過鉤子函數(shù)實現(xiàn)半場動畫操作

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

注意：

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

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

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

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="跳進籃子里" 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)"
      //表示動畫入場之前，坐標表示位置是在起始位置不動 
      //在一次入場動畫執(zhí)行完成之后，在最終位置停下來并不在起始位置，通過這里的位置的設(shè)置可以將入場動畫結(jié)束時的位置調(diào)到這里 
     },
     enter(el,done){
      el.offsetTop;
      //必須要寫一下offsetTop，offsetWeith等四種中的其中一種，強制刷新動畫
      el.style.transform = "translate(200px,450px)";
      el.style.transition = "all 2s ease";
      
      done()
      //done是enter方法的原生的引用函數(shù)名，這里表示是回調(diào)函數(shù)，也就是接下來執(zhí)行的操作aEnter（），消滅延遲效果。 
     },
     aEnter(el){
      this.show = !this.show;
     }
    }
    //這里的el代表，將要執(zhí)行半場動畫的對象，是第一個原生的參數(shù)，跟自定義指令的el作用是一樣的 
   });
  </script>
</body>
</html>

效果：

補充知識：vue動畫只有離場動畫，進場動畫不生效

存在問題的圖：（只有離場動畫，進場動畫不生效）

解決之后效果圖：

解決辦法：

在transition標簽中加入appear屬性

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

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

相關(guān)文章

最新評論