想封裝一個簡單的動畫組件,用css實現(xiàn)了一遍,效果是可行的,如下:
<template>
<div>
<transition name="bar">
<slot></slot>
</transition>
</div>
</template>
<style lang="stylus" scoped>
.bar-enter-active, .bar-leave-active{
transition: all .3s;
}
.bar-leave-active{
transform translateY(200px)
}
.bar-enter{
transform translateY(200px)
}
</style>
因為很多需要動態(tài)計算,所以想改為javascript 鉤子函數(shù)來實現(xiàn),但是發(fā)現(xiàn)怎么嘗試都沒有效果:
<template>
<div>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
>
<slot></slot>
</transition>
</div>
</template>
<script>
export default {
name: 'animation',
methods: {
beforeEnter: function (el) {
el.style.transform = 'translate-y(200px)'
},
// 此回調函數(shù)是可選項的設置
// 與 CSS 結合時使用
enter: function (el, done) {
el.style.transitionDuration = "3s"
el.style.transitionProperty = "all"
done()
},
// 此回調函數(shù)是可選項的設置
// 與 CSS 結合時使用
leave: function (el, done) {
el.style.transform = 'translate-y(200px)'
// el.style.transition = 'all 3s'
el.style.transitionDuration = "3s"
el.style.transitionProperty = "all"
done()
},
}
}
</script>
問題出在哪兒呢?
@donglegend 你好,謝謝,基本上可以,但是這種方式感覺有缺陷,如下:
//假設我想在1s中完成動畫(滑動250px)
//那么我需要函數(shù)執(zhí)行多少次呢?
//很顯然,如果我想動畫看上去越順滑,那必須每次移動的像素就越小,所以函數(shù)執(zhí)行越頻繁;
//相反,如果函數(shù)間隔時間越大,動畫會非常難看(一次移動的像素太多)
問題:假設我滑動的距離足夠大(1000px),執(zhí)行的時間足夠短(0.3s),看上去動畫要足夠順滑(每次移動5px),那么函數(shù)需要多長時間執(zhí)行一次呢? 。0.3 / (1000 / 5) ,0.3s要執(zhí)行200次函數(shù),每 0.0015s 執(zhí)行一次,這么頻繁的執(zhí)行函數(shù)到底有沒有問題呢?如果每次只能移動1px呢?
再者就是這些計算麻煩,不如css3動畫來得方便。
我用css實現(xiàn)的動畫和js鉤子實現(xiàn)的作比較,都是0.3s,總感覺css的動畫要快,要順滑。
<template>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
>
<slot></slot>
</transition>
</template>
<script>
export default {
name: 'animation',
data() {
return {
enterTimer: null,
leaveTimer: null
}
},
methods: {
beforeEnter: function(el) {
//設置滑塊的初始位置(滑塊的寬度)
el.style.bottom = '-250px'
},
enter: function(el, done) {
clearInterval(this.leaveTimer)
let _v = 0
//假設我想在1s中完成動畫(滑動250px)
//那么我需要函數(shù)執(zhí)行多少次呢?
//很顯然,如果我想動畫看上去越順滑,那必須每次移動的像素就越小,所以函數(shù)執(zhí)行越頻繁;
//相反,如果函數(shù)間隔時間越大,動畫會非常難看(一次移動的像素太多)
this.enterTimer = setInterval(() => {
if (_v < 250) {
_v += 2.5
} else {
_v = 250
clearInterval(this.enterTimer)
done()
}
el.style.opacity = _v
el.style.transform = `translateY(-${_v}px)`
}, 3)
},
leave: function(el, done) {
clearInterval(this.enterTimer)
let _v = 250
this.leaveTimer = setInterval(() => {
if (_v > 0) {
_v -= 2.5
} else {
_v = 0
clearInterval(this.leaveTimer)
done()
}
el.style.opacity = _v
el.style.transform = `translateY(-${_v}px)`
}, 3)
}
}
}
</script>
之前一直以為官方價紹了兩種方式是等價的,并且兩種方式對應的demo不是等效的,感覺這是巨大的一個坑
題主可能沒太理解 javascript鉤子動畫的用法。
你第一種是用 class類名切換通過css3自身實現(xiàn)的過渡動畫,但是鉤子函數(shù)實現(xiàn)動畫是另一種概念,需要通過 自己用定時器實現(xiàn),當然也可以配合css使用,這個官方有說明,下面簡單寫一個 opacity 過渡demo,
題主可以參考理解一下,如有疑問,歡迎再次討論。
<template>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
>
<slot></slot>
</transition>
</template>
<script>
export default {
name: 'animation',
data() {
return {
enterTimer: null,
leaveTimer: null
}
},
methods: {
beforeEnter: function(el) {
el.style.opacity = 0
el.style.transform = 'translateX(0px)'
el.style.transformOrigin = 'left'
},
// 此回調函數(shù)是可選項的設置
// 與 CSS 結合時使用
enter: function(el, done) {
clearInterval(this.leaveTimer)
let _v = 0
this.enterTimer = setInterval(() => {
if (_v < 1) {
_v += 0.01
} else {
_v = 1
clearInterval(this.enterTimer)
done()
}
el.style.opacity = _v
el.style.transform = `translateX(${_v * 100}px)`
}, 30)
},
// 此回調函數(shù)是可選項的設置
// 與 CSS 結合時使用
leave: function(el, done) {
clearInterval(this.enterTimer)
let _v = 1
this.leaveTimer = setInterval(() => {
if (_v > 0) {
_v -= 0.01
} else {
_v = 0
clearInterval(this.leaveTimer)
done()
}
el.style.opacity = _v
el.style.transform = `translateX(${_v * 100}px)`
}, 30)
}
}
}
</script>
北大青鳥APTECH成立于1999年。依托北京大學優(yōu)質雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數(shù)據專業(yè)的國家
北大青鳥中博軟件學院創(chuàng)立于2003年,作為華東區(qū)著名互聯(lián)網學院和江蘇省首批服務外包人才培訓基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團創(chuàng)建于1999年,經過二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術與教育服務機構,發(fā)展為教育服務業(yè)的綜合性企業(yè)集團,成為集合面授教學培訓、網
達內教育集團成立于2002年,是一家由留學海歸創(chuàng)辦的高端職業(yè)教育培訓機構,是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市,融資1
曾工作于聯(lián)想擔任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔任項目經理從事移動互聯(lián)網管理及研發(fā)工作,曾創(chuàng)辦藍懿科技有限責任公司從事總經理職務負責iOS教學及管理工作。
浪潮集團項目經理。精通Java與.NET 技術, 熟練的跨平臺面向對象開發(fā)經驗,技術功底深厚。 授課風格 授課風格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網頁制作和網頁游戲開發(fā)。
具有10 年的Java 企業(yè)應用開發(fā)經驗。曾經歷任德國Software AG 技術顧問,美國Dachieve 系統(tǒng)架構師,美國AngelEngineers Inc. 系統(tǒng)架構師。