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

Loading…
Cancel
Save