Browse Source

[weex] disable transition-group move animation for now

dev
Evan You 8 years ago
parent
commit
92fb118297
  1. 77
      src/platforms/weex/runtime/components/transition-group.js

77
src/platforms/weex/runtime/components/transition-group.js

@ -12,7 +12,7 @@ export default {
props,
created () {
const dom = this._requireWeexModule('dom')
const dom = this.$requireWeexModule('dom')
this.getPosition = el => new Promise((resolve, reject) => {
dom.getComponentRect(el.ref, res => {
if (!res.result) {
@ -23,7 +23,7 @@ export default {
})
})
const animation = this._requireWeexModule('animation')
const animation = this.$requireWeexModule('animation')
this.animate = (el, options) => new Promise(resolve => {
animation.transition(el.ref, options, resolve)
})
@ -57,12 +57,11 @@ export default {
if (prevChildren) {
const kept = []
const removed = []
const positionPromises = []
prevChildren.forEach(c => {
c.data.transition = transitionData
positionPromises.push(this.getPosition(c.elm).then(pos => {
c.data.pos = pos
}))
// TODO: record before patch positions
if (map[c.key]) {
kept.push(c)
} else {
@ -71,7 +70,6 @@ export default {
})
this.kept = h(tag, null, kept)
this.removed = removed
this.pendingPositions = Promise.all(positionPromises)
}
return h(tag, null, children)
@ -96,39 +94,38 @@ export default {
return
}
children.forEach(callPendingCbs)
this.pendingPositions.then(() => Promise.all(children.map(c => {
// record new position
return this.getPosition(c.elm).then(pos => {
c.data.newPos = pos
})
}))).then(() => Promise.all(children.map(c => {
const oldPos = c.data.pos
const newPos = c.data.newPos
const dx = oldPos.left - newPos.left
const dy = oldPos.top - newPos.top
if (dx || dy) {
c.data.moved = true
return this.animate(c.elm, {
styles: {
transform: `translate(${dx}px,${dy}px)`
}
})
}
}))).then(() => {
children.forEach(c => {
if (c.data.moved) {
this.animate(c.elm, {
styles: {
transform: ''
},
duration: moveData.duration || 0,
delay: moveData.delay || 0,
timingFunction: moveData.timingFunction || 'linear'
})
}
})
})
// TODO: finish implementing move animations once
// we have access to sync getComponentRect()
// children.forEach(callPendingCbs)
// Promise.all(children.map(c => {
// const oldPos = c.data.pos
// const newPos = c.data.newPos
// const dx = oldPos.left - newPos.left
// const dy = oldPos.top - newPos.top
// if (dx || dy) {
// c.data.moved = true
// return this.animate(c.elm, {
// styles: {
// transform: `translate(${dx}px,${dy}px)`
// }
// })
// }
// })).then(() => {
// children.forEach(c => {
// if (c.data.moved) {
// this.animate(c.elm, {
// styles: {
// transform: ''
// },
// duration: moveData.duration || 0,
// delay: moveData.delay || 0,
// timingFunction: moveData.timingFunction || 'linear'
// })
// }
// })
// })
},
methods: {

Loading…
Cancel
Save