123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
- import animationMap from './nvue.ani-map.js'
- const getClassNames = (name) => ({
- enter: `u-${name}-enter u-${name}-enter-active`,
- 'enter-to': `u-${name}-enter-to u-${name}-enter-active`,
- leave: `u-${name}-leave u-${name}-leave-active`,
- 'leave-to': `u-${name}-leave-to u-${name}-leave-active`
- })
- const animation = uni.requireNativePlugin('animation')
- const getStyle = (name) => animationMap[name]
- export default {
- methods: {
-
- clickHandler() {
- this.$emit('click')
- },
-
-
- vueEnter() {
-
- const classNames = getClassNames(this.mode)
-
- this.status = 'enter'
- this.$emit('beforeEnter')
- this.inited = true
- this.display = true
- this.classes = classNames.enter
- this.$nextTick(async () => {
-
- await uni.$u.sleep(20)
-
-
- this.$emit('enter')
- this.transitionEnded = false
-
- this.$emit('afterEnter')
-
- this.classes = classNames['enter-to']
- })
- },
-
- vueLeave() {
-
- if (!this.display) return
- const classNames = getClassNames(this.mode)
-
- this.status = 'leave'
- this.$emit('beforeLeave')
-
- this.classes = classNames.leave
- this.$nextTick(() => {
-
- this.transitionEnded = false
- this.$emit('leave')
-
- setTimeout(this.onTransitionEnd, this.duration)
- this.classes = classNames['leave-to']
- })
- },
-
-
-
- nvueEnter() {
-
- const currentStyle = getStyle(this.mode)
-
- this.status = 'enter'
- this.$emit('beforeEnter')
-
- this.inited = true
- this.display = true
-
-
- this.viewStyle = {
- opacity: 0
- }
-
- this.$nextTick(() => {
-
- this.viewStyle = currentStyle.enter
- Promise.resolve()
- .then(nextTick)
- .then(() => {
-
- this.$emit('enter')
-
- animation.transition(this.$refs['u-transition'].ref, {
- styles: currentStyle['enter-to'],
- duration: this.duration,
- timingFunction: this.timingFunction,
- needLayout: false,
- delay: 0
- }, () => {
-
- this.$emit('afterEnter')
- })
- })
- .catch(() => {})
- })
- },
- nvueLeave() {
- if (!this.display) {
- return
- }
- const currentStyle = getStyle(this.mode)
-
- this.status = 'leave'
- this.$emit('beforeLeave')
-
- this.viewStyle = currentStyle.leave
-
- Promise.resolve()
- .then(nextTick)
- .then(() => {
- this.transitionEnded = false
-
- this.$emit('leave')
- animation.transition(this.$refs['u-transition'].ref, {
- styles: currentStyle['leave-to'],
- duration: this.duration,
- timingFunction: this.timingFunction,
- needLayout: false,
- delay: 0
- }, () => {
- this.onTransitionEnd()
- })
- })
- .catch(() => {})
- },
-
-
- onTransitionEnd() {
-
- if (this.transitionEnded) return
- this.transitionEnded = true
-
- this.$emit(this.status === 'leave' ? 'afterLeave' : 'afterEnter')
- if (!this.show && this.display) {
- this.display = false
- this.inited = false
- }
- }
- }
- }
|