diff --git a/src/checkbox/index.less b/src/checkbox/index.less index f48b16464..ab5fbf077 100644 --- a/src/checkbox/index.less +++ b/src/checkbox/index.less @@ -22,7 +22,8 @@ line-height: inherit; text-align: center; border: 1px solid @checkbox-border-color; - transition: @checkbox-transition-duration; + transition-duration: @checkbox-transition-duration; + transition-property: color, border-color, background-color; } &--round { diff --git a/src/collapse-item/index.less b/src/collapse-item/index.less index da498b3ef..0b860ce4f 100644 --- a/src/collapse-item/index.less +++ b/src/collapse-item/index.less @@ -4,7 +4,7 @@ &__title { .van-cell__right-icon::before { transform: rotate(90deg); - transition: @collapse-item-transition-duration; + transition: transform @collapse-item-transition-duration; } &::after { diff --git a/src/dialog/index.less b/src/dialog/index.less index 414d43890..1f2530c12 100644 --- a/src/dialog/index.less +++ b/src/dialog/index.less @@ -12,6 +12,7 @@ transform: translate3d(-50%, -50%, 0); backface-visibility: hidden; // avoid blurry text after scale animation transition: @dialog-transition; + transition-property: transform, opacity; &__header { padding-top: @dialog-header-padding-top; diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js index cdcc50700..dc62df888 100644 --- a/src/image-preview/ImagePreview.js +++ b/src/image-preview/ImagePreview.js @@ -88,7 +88,7 @@ export default createComponent({ imageStyle() { const { scale } = this; const style = { - transition: this.zooming || this.moving ? '' : '.3s all' + transitionDuration: this.zooming || this.moving ? '0s' : '.3s' }; if (scale !== 1) { diff --git a/src/image-preview/index.less b/src/image-preview/index.less index a97c7df2e..f1173c1ca 100644 --- a/src/image-preview/index.less +++ b/src/image-preview/index.less @@ -13,6 +13,7 @@ right: 0; bottom: 0; left: 0; + transition-property: transform; .van-image__loading { background-color: transparent; diff --git a/src/image-preview/test/__snapshots__/index.spec.js.snap b/src/image-preview/test/__snapshots__/index.spec.js.snap index 532a1a3d5..1a4b0f238 100644 --- a/src/image-preview/test/__snapshots__/index.spec.js.snap +++ b/src/image-preview/test/__snapshots__/index.spec.js.snap @@ -14,7 +14,7 @@ exports[`lazy-load prop 1`] = `
-
+
@@ -45,7 +45,7 @@ exports[`render image 1`] = `
-
+
@@ -84,7 +84,7 @@ exports[`zoom 1`] = `
-
+
diff --git a/src/list/test/__snapshots__/demo.spec.js.snap b/src/list/test/__snapshots__/demo.spec.js.snap index ca1a7eb09..124aee301 100644 --- a/src/list/test/__snapshots__/demo.spec.js.snap +++ b/src/list/test/__snapshots__/demo.spec.js.snap @@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
-
+
diff --git a/src/pull-refresh/index.js b/src/pull-refresh/index.js index c29faa71c..ca4d0d791 100644 --- a/src/pull-refresh/index.js +++ b/src/pull-refresh/index.js @@ -151,7 +151,7 @@ export default createComponent({ const { status, distance } = this; const text = this[`${status}Text`] || t(status); const style = { - transition: `${this.duration}ms`, + transitionDuration: `${this.duration}ms`, transform: this.distance ? `translate3d(0,${this.distance}px, 0)` : '' }; diff --git a/src/pull-refresh/index.less b/src/pull-refresh/index.less index 45f82c3ab..65740496f 100644 --- a/src/pull-refresh/index.less +++ b/src/pull-refresh/index.less @@ -6,6 +6,7 @@ &__track { position: relative; + transition-property: transform; } &__head { diff --git a/src/pull-refresh/test/__snapshots__/demo.spec.js.snap b/src/pull-refresh/test/__snapshots__/demo.spec.js.snap index 239651ba7..836eae87d 100644 --- a/src/pull-refresh/test/__snapshots__/demo.spec.js.snap +++ b/src/pull-refresh/test/__snapshots__/demo.spec.js.snap @@ -3,7 +3,7 @@ exports[`renders demo correctly 1`] = `
-
+

刷新次数: 0

diff --git a/src/pull-refresh/test/__snapshots__/index.spec.js.snap b/src/pull-refresh/test/__snapshots__/index.spec.js.snap index a63babeaf..e53870a81 100644 --- a/src/pull-refresh/test/__snapshots__/index.spec.js.snap +++ b/src/pull-refresh/test/__snapshots__/index.spec.js.snap @@ -2,7 +2,7 @@ exports[`change head content when pulling down 1`] = `
-
+
下拉即可刷新...
@@ -12,7 +12,7 @@ exports[`change head content when pulling down 1`] = ` exports[`change head content when pulling down 2`] = `
-
+
释放即可刷新...
@@ -22,7 +22,7 @@ exports[`change head content when pulling down 2`] = ` exports[`change head content when pulling down 3`] = `
-
+
加载中...
@@ -32,7 +32,7 @@ exports[`change head content when pulling down 3`] = ` exports[`change head content when pulling down 4`] = `
-
+
加载中...
@@ -42,7 +42,7 @@ exports[`change head content when pulling down 4`] = ` exports[`change head content when pulling down 5`] = `
-
+
@@ -50,7 +50,7 @@ exports[`change head content when pulling down 5`] = ` exports[`custom content by slots 1`] = `
-
+
pulling 20
@@ -58,7 +58,7 @@ exports[`custom content by slots 1`] = ` exports[`custom content by slots 2`] = `
-
+
loosing 75
@@ -66,7 +66,7 @@ exports[`custom content by slots 2`] = ` exports[`custom content by slots 3`] = `
-
+
loading 50
@@ -74,7 +74,7 @@ exports[`custom content by slots 3`] = ` exports[`not in page top 1`] = `
-
+
diff --git a/src/radio/index.less b/src/radio/index.less index 010c9d3dd..833aba0ed 100644 --- a/src/radio/index.less +++ b/src/radio/index.less @@ -22,7 +22,8 @@ line-height: inherit; text-align: center; border: 1px solid @radio-border-color; - transition: @radio-transition-duration; + transition-duration: @radio-transition-duration; + transition-property: color, border-color, background-color; } &--round { diff --git a/src/style/var.less b/src/style/var.less index bd11398d9..ec7bd9b13 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -431,7 +431,7 @@ // Popup @popup-background-color: @white; -@popup-transition: @animation-duration-base ease-out; +@popup-transition: transform @animation-duration-base ease-out; @popup-round-border-radius: 12px; @popup-close-icon-size: 18px; @popup-close-icon-color: @gray-dark; diff --git a/src/swipe-cell/index.js b/src/swipe-cell/index.js index 463d4ef43..f39d75625 100644 --- a/src/swipe-cell/index.js +++ b/src/swipe-cell/index.js @@ -168,7 +168,7 @@ export default createComponent({ const wrapperStyle = { transform: `translate3d(${this.offset}px, 0, 0)`, - transition: this.dragging ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)' + transitionDuration: this.dragging ? '0s' : '.6s' }; return ( diff --git a/src/swipe-cell/index.less b/src/swipe-cell/index.less index e2a54f843..14bca654a 100644 --- a/src/swipe-cell/index.less +++ b/src/swipe-cell/index.less @@ -4,6 +4,11 @@ position: relative; overflow: hidden; + &__wrapper { + transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); + transition-property: transform; + } + &__left, &__right { position: absolute; diff --git a/src/swipe-cell/test/__snapshots__/demo.spec.js.snap b/src/swipe-cell/test/__snapshots__/demo.spec.js.snap index a917366ca..5cf95a5a5 100644 --- a/src/swipe-cell/test/__snapshots__/demo.spec.js.snap +++ b/src/swipe-cell/test/__snapshots__/demo.spec.js.snap @@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
-
+
单元格
@@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
-
+
单元格
diff --git a/src/swipe-cell/test/__snapshots__/index.spec.js.snap b/src/swipe-cell/test/__snapshots__/index.spec.js.snap index fc1b83429..def90a113 100644 --- a/src/swipe-cell/test/__snapshots__/index.spec.js.snap +++ b/src/swipe-cell/test/__snapshots__/index.spec.js.snap @@ -2,7 +2,7 @@ exports[`auto calc width 1`] = `
-
+
Left
Right
@@ -11,7 +11,7 @@ exports[`auto calc width 1`] = ` exports[`drag and show left part 1`] = `
-
+
Left
Right
@@ -20,7 +20,7 @@ exports[`drag and show left part 1`] = ` exports[`drag and show left part 2`] = `
-
+
Left
Right
@@ -29,7 +29,7 @@ exports[`drag and show left part 2`] = ` exports[`drag and show left part 3`] = `
-
+
Left
Right
@@ -38,7 +38,7 @@ exports[`drag and show left part 3`] = ` exports[`drag and show left part 4`] = `
-
+
Left
Right
@@ -47,7 +47,7 @@ exports[`drag and show left part 4`] = ` exports[`drag and show right part 1`] = `
-
+
Left
Right
@@ -56,7 +56,7 @@ exports[`drag and show right part 1`] = ` exports[`render one side 1`] = `
-
+
Left
diff --git a/src/switch/index.less b/src/switch/index.less index c73b087ab..f7b1aa142 100644 --- a/src/switch/index.less +++ b/src/switch/index.less @@ -21,7 +21,7 @@ background-color: @switch-node-background-color; border-radius: 100%; box-shadow: @switch-node-box-shadow; - transition: @switch-transition-duration; + transition: transform @switch-transition-duration; } &__loading {