Skip to content

#4371 - Explicit transition durations #4857

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Feb 15, 2017
Merged

#4371 - Explicit transition durations #4857

Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
959300d
Add transition explicit duration
Akryum Feb 5, 2017
fe34d4a
Fix tests for explicit transition duration
Akryum Feb 5, 2017
48e14ac
Tweaks & default to milliseconds
Akryum Feb 5, 2017
184530c
Better tests
Akryum Feb 5, 2017
a239cf2
Better test for change value case
Akryum Feb 5, 2017
94d9633
Fix transition duration tests
Akryum Feb 5, 2017
fd0f0ae
Better flow typing
Akryum Feb 5, 2017
8332b6d
Fix transition test
Akryum Feb 5, 2017
c88a573
Revert "Fix transition test"
Akryum Feb 5, 2017
6e83994
Fix transition test
Akryum Feb 5, 2017
558d15b
Better flow types
Akryum Feb 6, 2017
ec1513f
Warn message
Akryum Feb 6, 2017
2e184a5
Better prop handling
Akryum Feb 6, 2017
402b0f3
Better flow typings
Akryum Feb 12, 2017
e6f8fed
adjustments
yyx990803 Feb 15, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Warn message
  • Loading branch information
@Akryum @yyx990803
Akryum authored and yyx990803 committed Feb 15, 2017
commit ec1513f9deacb11d23251f4426b1aae0350f205f
32 changes: 25 additions & 7 deletions src/platforms/web/runtime/modules/transition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* @flow */

import { inBrowser, isIE9 } from 'core/util/index'
import { inBrowser, isIE9, warn } from 'core/util/index'
import { once } from 'shared/util'
import { mergeVNodeHook } from 'core/vdom/helpers/index'
import { activeInstance } from 'core/instance/lifecycle'
Expand All @@ -13,6 +13,16 @@ import {
parseDuration
} from '../transition-util'

function explicitDurationNaNWarn (name, vnode) {
warn(
`<transition> explicit ${name} duration is NaN and ` +
'may yield unexpected results. ' +
'The duration expression might be incorrect. ' +
`Valid examples: '500ms', '.5s' or 500`,
vnode.context
)
}

export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
const el: any = vnode.elm

Expand Down Expand Up @@ -78,12 +88,16 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
const afterEnterHook = isAppear ? (afterAppear || afterEnter) : afterEnter
const enterCancelledHook = isAppear ? (appearCancelled || enterCancelled) : enterCancelled

const explicitDuration = parseDuration((
const explicitEnterDuration = parseDuration((
duration !== null &&
typeof duration === 'object' &&
duration.enter
) || duration)

if (process.env.NODE_ENV !== 'production' && isNaN(explicitEnterDuration)) {
explicitDurationNaNWarn('enter', vnode)
}

const expectsCSS = css !== false && !isIE9
const userWantsControl =
enterHook &&
Expand Down Expand Up @@ -130,8 +144,8 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
addTransitionClass(el, toClass)
removeTransitionClass(el, startClass)
if (!cb.cancelled && !userWantsControl) {
if (typeof explicitDuration !== 'undefined') {
setTimeout(cb, explicitDuration)
if (typeof explicitEnterDuration === 'number') {
setTimeout(cb, explicitEnterDuration)
} else {
whenTransitionEnds(el, type, cb)
}
Expand Down Expand Up @@ -189,12 +203,16 @@ export function leave (vnode: VNodeWithData, rm: Function) {
// the length of original fn as _length
(leave._length || leave.length) > 1

const explicitDuration = parseDuration((
const explicitLeaveDuration = parseDuration((
duration !== null &&
typeof duration === 'object' &&
duration.leave
) || duration)

if (process.env.NODE_ENV !== 'production' && isNaN(explicitLeaveDuration)) {
explicitDurationNaNWarn('leave', vnode)
}

const cb = el._leaveCb = once(() => {
if (el.parentNode && el.parentNode._pending) {
el.parentNode._pending[vnode.key] = null
Expand Down Expand Up @@ -238,8 +256,8 @@ export function leave (vnode: VNodeWithData, rm: Function) {
addTransitionClass(el, leaveToClass)
removeTransitionClass(el, leaveClass)
if (!cb.cancelled && !userWantsControl) {
if (typeof explicitDuration !== 'undefined') {
setTimeout(cb, explicitDuration)
if (typeof explicitLeaveDuration === 'number') {
setTimeout(cb, explicitLeaveDuration)
} else {
whenTransitionEnds(el, type, cb)
}
Expand Down