vue動(dòng)畫—通過鉤子函數(shù)實(shí)現(xiàn)半場動(dòng)畫操作
注意：
1.起始位置設(shè)置了一個(gè)（0，0）在第一遍執(zhí)行時(shí)，是沒有作用的。在一次入場動(dòng)畫執(zhí)行完成之后，在最終位置停下來并不在起始位置，通過這里的位置的設(shè)置可以將入場動(dòng)畫結(jié)束時(shí)的位置調(diào)到這里
2.理解enter()函數(shù)的el的指代對(duì)象和done()指代的回調(diào)函數(shù)
3.理解this.show = !this.show，這句話有兩個(gè)作用。一是：控制顯示和隱藏，二是：false —> true為半場動(dòng)畫，true—>false又是為另半場動(dòng)畫。這樣就能完成一直循環(huán)執(zhí)行半場動(dòng)畫的效果了。
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)畫入場之前，坐標(biāo)表示位置是在起始位置不動(dòng)
//在一次入場動(dòng)畫執(zhí)行完成之后，在最終位置停下來并不在起始位置，通過這里的位置的設(shè)置可以將入場動(dòng)畫結(jié)束時(shí)的位置調(diào)到這里
},
enter(el,done){
el.offsetTop;
//必須要寫一下offsetTop，offsetWeith等四種中的其中一種，強(qiáng)制刷新動(dòng)畫
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í)行半場動(dòng)畫的對(duì)象，是第一個(gè)原生的參數(shù)，跟自定義指令的el作用是一樣的
});
</script>
</body>
</html>
效果：
補(bǔ)充知識(shí)：vue動(dòng)畫只有離場動(dòng)畫，進(jìn)場動(dòng)畫不生效
存在問題的圖：（只有離場動(dòng)畫，進(jìn)場動(dòng)畫不生效）
解決之后效果圖：
解決辦法：
在transition標(biāo)簽中加入appear屬性
<template> <transition mode="out-in" appear> <div class="singer-detail"> </div> </transition> </template>
以上這篇vue動(dòng)畫—通過鉤子函數(shù)實(shí)現(xiàn)半場動(dòng)畫操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue組件之全局注冊和局部注冊方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
npm安裝vue@cli報(bào)錯(cuò)的簡單處理方式
最近工作中遇到了報(bào)錯(cuò),現(xiàn)在將解決的辦法分享給大家,下面這篇文章主要給大家介紹了關(guān)于npm安裝vue@cli報(bào)錯(cuò)的簡單處理方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
用vue設(shè)計(jì)一個(gè)數(shù)據(jù)采集器
這篇文章主要介紹了如何用vue設(shè)計(jì)一個(gè)數(shù)據(jù)采集器，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項(xiàng)目
這篇文章主要介紹了解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項(xiàng)目.文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了如何使用Vue和高德API搭建一個(gè)前端頁面,實(shí)現(xiàn)了地圖的加載和衛(wèi)星圖層、路網(wǎng)圖層的管理,文中通過圖文及代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
在實(shí)際業(yè)務(wù)中,除了父子組件通信外,還有很多非父子組件通信的場景,下面這篇文章主要給大家介紹了關(guān)于Vue非父子組件之間的通信方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了element-ui 本地化使用教程詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue項(xiàng)目是如何運(yùn)行起來的，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue用mixin合并重復(fù)代碼的實(shí)現(xiàn)
這篇文章主要介紹了Vue用mixin合并重復(fù)代碼的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
詳解vuejs2.0 select 動(dòng)態(tài)綁定下拉框支持多選
這篇文章主要介紹了vuejs2.0 select動(dòng)態(tài)綁定下拉框 ，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04