8000 only apply moving transition when transform is a transitioned property · GCLluochen/vue@ad26a7d · GitHub
[go: up one dir, main page]

8000 Skip to content

Commit ad26a7d

Browse files
committed
only apply moving transition when transform is a transitioned property
1 parent 93af313 commit ad26a7d

File tree

2 files changed

+16
-6
lines changed

2 files changed

+16
-6
lines changed

src/directives/public/for.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -411,10 +411,10 @@ const vFor = {
411411
var moving = node._pendingMoveCb
412412
var type
413413
if (!moving) {
414-
// sniff whether element has a transition duration
414+
// sniff whether element has a transition duration for transform
415415
// with the move class applied
416416
addClass(node, moveClass)
417-
type = transition.getCssTransitionType(moveClass)
417+
type = transition.getCssTransitionType(moveClass, true)
418418
removeClass(node, moveClass)
419419
}
420420
if (moving || type === TYPE_TRANSITION) {

src/transition/transition.js

Lines changed: 14 additions & 4 deletions
4CF6
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import {
1515

1616
export const TYPE_TRANSITION = 'transition'
1717
export const TYPE_ANIMATION = 'animation'
18-
export const transDurationProp = transitionProp + 'Duration'
19-
export const animDurationProp = animationProp + 'Duration'
18+
const transDurationProp = transitionProp + 'Duration'
19+
const animDurationProp = animationProp + 'Duration'
2020

2121
/**
2222
* A Transition object that encapsulates the state and logic
@@ -306,10 +306,11 @@ p.callHookWithCb = function (type) {
306306
* calculated styles.
307307
*
308308
* @param {String} className
309-
* @return {Number}
309+
* @param {Boolean} expectTransform
310+
* @return {String}
310311
*/
311312

312-
p.getCssTransitionType = function (className) {
313+
p.getCssTransitionType = function (className, expectTransform) {
313314
/* istanbul ignore if */
314315
if (
315316
!transitionEndEvent ||
@@ -330,6 +331,15 @@ p.getCssTransitionType = function (className) {
330331
if (type) return type
331332
var inlineStyles = this.el.style
332333
var computedStyles = window.getComputedStyle(this.el)
334+
335+
// check if `transform` is among the transitioned properties
336+
if (expectTransform) {
337+
var transitionProperties = computedStyles[transitionProp + 'Property']
338+
if (!/\btransform(,|$)/.test(transitionProperties)) {
339+
return
340+
}
341+
}
342+
333343
var transDuration =
334344
inlineStyles[transDurationProp] ||
335345
computedStyles[transDurationProp]

0 commit comments

Comments
 (0)
0