|
|
@@ -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: {
|