建站
咨詢
售后
建站咨詢
新聞中心
目前為止，關(guān)于過(guò)渡我們已經(jīng)講到：
創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)提供從項(xiàng)目策劃、軟件開(kāi)發(fā)，軟件安全維護(hù)、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評(píng)估等整套的建站服務(wù)，主營(yíng)業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)，app軟件開(kāi)發(fā)以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。創(chuàng)新互聯(lián)公司深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
- 單個(gè)節(jié)點(diǎn)
- 同一時(shí)間渲染多個(gè)節(jié)點(diǎn)中的一個(gè)
那么怎么同時(shí)渲染整個(gè)列表，比如使用 v-for？在這種場(chǎng)景中，使用
- 不同于
。你也可以通過(guò)tagattribute 更換為其他元素。 - 過(guò)渡模式不可用，因?yàn)槲覀儾辉傧嗷デ袚Q特有的元素。
- 內(nèi)部元素總是需要提供唯一的
keyattribute 值。 - CSS 過(guò)渡的類將會(huì)應(yīng)用在內(nèi)部的元素中，而不是這個(gè)組/容器本身。
#列表的進(jìn)入/離開(kāi)過(guò)渡
現(xiàn)在讓我們由一個(gè)簡(jiǎn)單的例子深入，進(jìn)入和離開(kāi)的過(guò)渡使用之前一樣的 CSS class 名。
{{ item }}
const Demo = {
data() {
return {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
nextNum: 10
}
},
methods: {
randomIndex() {
return Math.floor(Math.random() * this.items.length)
},
add() {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove() {
this.items.splice(this.randomIndex(), 1)
}
}
}
Vue.createApp(Demo).mount('#list-demo').list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
}點(diǎn)擊此處實(shí)現(xiàn)
這個(gè)例子有個(gè)問(wèn)題，當(dāng)添加和移除元素的時(shí)候，周圍的元素會(huì)瞬間移動(dòng)到他們的新布局的位置，而不是平滑的過(guò)渡，我們下面會(huì)解決這個(gè)問(wèn)題。
#列表的排序過(guò)渡
v-move class，它會(huì)在元素的改變定位的過(guò)程中應(yīng)用。像之前的類名一樣，可以通過(guò) name attribute 來(lái)自定義前綴，也可以通過(guò) move-class attribute 手動(dòng)設(shè)置。
該 class 主要用于指定過(guò)渡 timing 和 easing 曲線，如下所示：
{{ item }}
const Demo = {
data() {
return {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
},
methods: {
shuffle() {
this.items = _.shuffle(this.items)
}
}
}
Vue.createApp(Demo).mount('#flip-list-demo').flip-list-move {
transition: transform 0.8s ease;
}點(diǎn)擊此處實(shí)現(xiàn)
這個(gè)看起來(lái)很神奇，內(nèi)部的實(shí)現(xiàn)，Vue 使用了一個(gè)叫 FLIP 簡(jiǎn)單的動(dòng)畫(huà)隊(duì)列使用 transforms 將元素從之前的位置平滑過(guò)渡新的位置。
我們將之前實(shí)現(xiàn)的例子和這個(gè)技術(shù)結(jié)合，使我們列表的一切變動(dòng)都會(huì)有動(dòng)畫(huà)過(guò)渡。
{{ item }}
const Demo = {
data() {
return {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
nextNum: 10
}
},
methods: {
randomIndex() {
return Math.floor(Math.random() * this.items.length)
},
add() {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove() {
this.items.splice(this.randomIndex(), 1)
},
shuffle() {
this.items = _.shuffle(this.items)
}
}
}
Vue.createApp(Demo).mount('#list-complete-demo').list-complete-item {
transition: all 0.8s ease;
display: inline-block;
margin-right: 10px;
}
.list-complete-enter-from,
.list-complete-leave-to {
opacity: 0;
transform: translateY(30px);
}
.list-complete-leave-active {
position: absolute;
}點(diǎn)擊此處實(shí)現(xiàn)
TIP
需要注意的是使用 FLIP 過(guò)渡的元素不能設(shè)置為 display: inline。作為替代方案，可以設(shè)置為 display: inline-block 或者放置于 flex 中
FLIP 動(dòng)畫(huà)不僅可以實(shí)現(xiàn)單列過(guò)渡，多維網(wǎng)格也同樣可以過(guò)渡：
TODO：示例
#列表的交錯(cuò)過(guò)渡
通過(guò) data attribute 與 JavaScript 通信，就可以實(shí)現(xiàn)列表的交錯(cuò)過(guò)渡：
{{ item.msg }}
const Demo = {
data() {
return {
query: '',
list: [
{ msg: 'Bruce Lee' },
{ msg: 'Jackie Chan' },
{ msg: 'Chuck Norris' },
{ msg: 'Jet Li' },
{ msg: 'Kung Fury' }
]
}
},
computed: {
computedList() {
var vm = this
return this.list.filter(item => {
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
})
}
},
methods: {
beforeEnter(el) {
el.style.opacity = 0
el.style.height = 0
},
enter(el, done) {
gsap.to(el, {
opacity: 1,
height: '1.6em',
delay: el.dataset.index * 0.15,
onComplete: done
})
},
leave(el, done) {
gsap.to(el, {
opacity: 0,
height: 0,
delay: el.dataset.index * 0.15,
onComplete: done
})
}
}
}
Vue.createApp(Demo).mount('#demo')點(diǎn)擊此處實(shí)現(xiàn)
#可復(fù)用的過(guò)渡
過(guò)渡可以通過(guò) Vue 的組件系統(tǒng)實(shí)現(xiàn)復(fù)用。要?jiǎng)?chuàng)建一個(gè)可復(fù)用過(guò)渡組件，你需要做的就是將
TODO：使用 Vue3 重構(gòu)
使用 template 的簡(jiǎn)單例子：
Vue.component('my-special-transition', {
template: '\
\
函數(shù)式組件更適合完成這個(gè)任務(wù)：
Vue.component('my-special-transition', {
functional: true,
render: function(createElement, context) {
var data = {
props: {
name: 'very-special-transition',
mode: 'out-in'
},
on: {
beforeEnter(el) {
// ...
},
afterEnter(el) {
// ...
}
}
}
return createElement('transition', data, context.children)
}
})#動(dòng)態(tài)過(guò)渡
在 Vue 中即使是過(guò)渡也是數(shù)據(jù)驅(qū)動(dòng)的！動(dòng)態(tài)過(guò)渡最基本的例子是通過(guò) name attribute 來(lái)綁定動(dòng)態(tài)值。
當(dāng)你想用 Vue 的過(guò)渡系統(tǒng)來(lái)定義的 CSS 過(guò)渡/動(dòng)畫(huà)在不同過(guò)渡間切換會(huì)非常有用。
所有過(guò)渡 attribute 都可以動(dòng)態(tài)綁定，但我們不僅僅只有 attribute 可以利用，還可以通過(guò)事件鉤子獲取上下文中的所有數(shù)據(jù)，因?yàn)槭录^子都是方法。這意味著，根據(jù)組件的狀態(tài)不同，你的 JavaScript 過(guò)渡會(huì)有不同的表現(xiàn)
Fade In:
Fade Out:
hello
const app = Vue.createApp({
data() {
return {
show: true,
fadeInDuration: 1000,
fadeOutDuration: 1000,
maxFadeDuration: 1500,
stop: true
}
},
mounted() {
this.show = false
},
methods: {
beforeEnter(el) {
el.style.opacity = 0
},
enter(el, done) {
var vm = this
Velocity(
el,
{ opacity: 1 },
{
duration: this.fadeInDuration,
complete: function() {
done()
if (!vm.stop) vm.show = false
}
}
)
},
leave(el, done) {
var vm = this
Velocity(
el,
{ opacity: 0 },
{
duration: this.fadeOutDuration,
complete: function() {
done()
vm.show = true
}
}
)
}
}
})
app.mount('#dynamic-fade-demo')TODO：示例
最后，創(chuàng)建動(dòng)態(tài)過(guò)渡的最終方案是組件通過(guò)接受 props 來(lái)動(dòng)態(tài)修改之前的過(guò)渡。一句老話，唯一的限制是你的想象力。
分享標(biāo)題：創(chuàng)新互聯(lián)VUE3教程：Vue3.0列表過(guò)渡
網(wǎng)站鏈接：http://www.5511xx.com/article/cddsjsg.html
