Browse Source

implement transition-group

dev
Evan You 8 years ago
parent
commit
a7508b133c
  1. 50
      src/platforms/web/runtime/components/transition-group.js

50
src/platforms/web/runtime/components/transition-group.js

@ -1 +1,49 @@
export default {}
import { warn } from 'core/util/index'
// Because the vdom's children update algorithm is "unstable" - i.e.
// it doesn't guarantee the relative positioning of removed elements,
// we force transition-group to update its children into two passes:
// in the first pass, we remove all nodes that need to be removed,
// triggering their leaving transition; in the second pass, we insert/move
// into the final disired state. This way in the second pass removed
// nodes will remain where they should be.
export default {
props: ['tag'],
beforeUpdate () {
this.__patch__(this._vnode, this.kept)
this._vnode = this.kept
},
render (h) {
const prevMap = this.prevChildrenMap
const children = this.$slots.default || []
const map = this.prevChildrenMap = {}
const kept = []
for (let i = 0; i < children.length; i++) {
const c = children[i]
if (c.tag) {
if (c.key == null) {
process.env.NODE_ENV !== 'production' && warn(
'transition-group children must be keyed.'
)
c.key = i
}
map[c.key] = c
;(c.data || (c.data = {})).transition = { name: 'fade' }
if (prevMap && prevMap[c.key]) {
kept.push(c)
}
}
}
const tag = this.tag || this.$vnode.data.tag || 'span'
if (this._isMounted) {
this.kept = h(tag, null, kept)
}
return h(tag, null, children)
}
}

Loading…
Cancel
Save