建站
咨詢
售后
建站咨詢
新聞中心
目前為止，關(guān)于過渡我們已經(jīng)講到：
創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)提供從項(xiàng)目策劃、軟件開發(fā)，軟件安全維護(hù)、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評估等整套的建站服務(wù)，主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)，app軟件開發(fā)以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。創(chuàng)新互聯(lián)公司深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
- 單個節(jié)點(diǎn)
- 同一時間渲染多個節(jié)點(diǎn)中的一個
那么怎么同時渲染整個列表，比如使用 v-for？在這種場景中，使用
- 不同于
。你也可以通過tagattribute 更換為其他元素。 - 過渡模式不可用，因?yàn)槲覀儾辉傧嗷デ袚Q特有的元素。
- 內(nèi)部元素總是需要提供唯一的
keyattribute 值。 - CSS 過渡的類將會應(yīng)用在內(nèi)部的元素中，而不是這個組/容器本身。
#列表的進(jìn)入/離開過渡
現(xiàn)在讓我們由一個簡單的例子深入，進(jìn)入和離開的過渡使用之前一樣的 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)
這個例子有個問題，當(dāng)添加和移除元素的時候，周圍的元素會瞬間移動到他們的新布局的位置，而不是平滑的過渡，我們下面會解決這個問題。
#列表的排序過渡
v-move class，它會在元素的改變定位的過程中應(yīng)用。像之前的類名一樣，可以通過 name attribute 來自定義前綴，也可以通過 move-class attribute 手動設(shè)置。
該 class 主要用于指定過渡 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)
這個看起來很神奇，內(nèi)部的實(shí)現(xiàn)，Vue 使用了一個叫 FLIP 簡單的動畫隊(duì)列使用 transforms 將元素從之前的位置平滑過渡新的位置。
我們將之前實(shí)現(xiàn)的例子和這個技術(shù)結(jié)合，使我們列表的一切變動都會有動畫過渡。
{{ 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 過渡的元素不能設(shè)置為 display: inline。作為替代方案，可以設(shè)置為 display: inline-block 或者放置于 flex 中
FLIP 動畫不僅可以實(shí)現(xiàn)單列過渡，多維網(wǎng)格也同樣可以過渡：
TODO：示例
#列表的交錯過渡
通過 data attribute 與 JavaScript 通信，就可以實(shí)現(xiàn)列表的交錯過渡：
{{ 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ù)用的過渡
過渡可以通過 Vue 的組件系統(tǒng)實(shí)現(xiàn)復(fù)用。要創(chuàng)建一個可復(fù)用過渡組件，你需要做的就是將
TODO：使用 Vue3 重構(gòu)
使用 template 的簡單例子：
Vue.component('my-special-transition', {
template: '\
\
函數(shù)式組件更適合完成這個任務(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)
}
})#動態(tài)過渡
在 Vue 中即使是過渡也是數(shù)據(jù)驅(qū)動的！動態(tài)過渡最基本的例子是通過 name attribute 來綁定動態(tài)值。
當(dāng)你想用 Vue 的過渡系統(tǒng)來定義的 CSS 過渡/動畫在不同過渡間切換會非常有用。
所有過渡 attribute 都可以動態(tài)綁定，但我們不僅僅只有 attribute 可以利用，還可以通過事件鉤子獲取上下文中的所有數(shù)據(jù)，因?yàn)槭录^子都是方法。這意味著，根據(jù)組件的狀態(tài)不同，你的 JavaScript 過渡會有不同的表現(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)建動態(tài)過渡的最終方案是組件通過接受 props 來動態(tài)修改之前的過渡。一句老話，唯一的限制是你的想象力。
當(dāng)前標(biāo)題：創(chuàng)新互聯(lián)VUE3教程：Vue3.0列表過渡
URL網(wǎng)址：http://fisionsoft.com.cn/article/cddsjsg.html
