perf: add transition-property (#4389)

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 {

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 {

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;

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) {

src/image-preview/index.less

@@ -13,6 +13,7 @@
     right: 0;
     bottom: 0;
     left: 0;
+    transition-property: transform;
 
     .van-image__loading {
       background-color: transparent;

src/image-preview/test/__snapshots__/index.spec.js.snap

@@ -14,7 +14,7 @@ exports[`lazy-load prop 1`] = `
   <div class="van-swipe">
     <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);">
       <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
-        <div class="van-image van-image-preview__image" style="transition: .3s all;"><img class="van-image__img" style="object-fit: contain;">
+        <div class="van-image van-image-preview__image" style="transition-duration: .3s;"><img class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading">
             <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: rgb(201, 201, 201);"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
           </div>
@@ -45,7 +45,7 @@ exports[`render image 1`] = `
   <div class="van-swipe">
     <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);">
       <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
-        <div class="van-image van-image-preview__image" style="transition: .3s all;"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
+        <div class="van-image van-image-preview__image" style="transition-duration: .3s;"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading">
             <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: rgb(201, 201, 201);"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
           </div>
@@ -84,7 +84,7 @@ exports[`zoom 1`] = `
   <div class="van-swipe">
     <div class="van-swipe__track" style="transition-duration: 500ms; width: 0px; transform: translateX(0px);">
       <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">
-        <div class="van-image van-image-preview__image" style="transform: scale3d(2, 2, 1) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
+        <div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale3d(2, 2, 1) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading">
             <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: rgb(201, 201, 201);"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
           </div>

src/list/test/__snapshots__/demo.spec.js.snap

@@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs__content">
       <div role="tabpanel" class="van-tab__pane" style="">
         <div class="van-pull-refresh">
-          <div class="van-pull-refresh__track" style="transition: 0ms;">
+          <div class="van-pull-refresh__track" style="transition-duration: 0ms;">
             <div class="van-pull-refresh__head"></div>
             <div role="feed" class="van-list" aria-busy="true">
               <div class="van-list__loading">

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)` : ''
     };
 

src/pull-refresh/index.less

@@ -6,6 +6,7 @@
 
   &__track {
     position: relative;
+    transition-property: transform;
   }
 
   &__head {

src/pull-refresh/test/__snapshots__/demo.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div class="van-pull-refresh">
-    <div class="van-pull-refresh__track" style="transition: 0ms;">
+    <div class="van-pull-refresh__track" style="transition-duration: 0ms;">
       <div class="van-pull-refresh__head"></div>
       <div>
         <p>刷新次数: 0</p>

src/pull-refresh/test/__snapshots__/index.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`change head content when pulling down 1`] = `
 <div class="van-pull-refresh">
-  <div class="van-pull-refresh__track" style="transition: 0ms; transform: translate3d(0,20px, 0);">
+  <div class="van-pull-refresh__track" style="transition-duration: 0ms; transform: translate3d(0,20px, 0);">
     <div class="van-pull-refresh__head">
       <div class="van-pull-refresh__text">下拉即可刷新...</div>
     </div>
@@ -12,7 +12,7 @@ exports[`change head content when pulling down 1`] = `
 
 exports[`change head content when pulling down 2`] = `
 <div class="van-pull-refresh">
-  <div class="van-pull-refresh__track" style="transition: 0ms; transform: translate3d(0,75px, 0);">
+  <div class="van-pull-refresh__track" style="transition-duration: 0ms; transform: translate3d(0,75px, 0);">
     <div class="van-pull-refresh__head">
       <div class="van-pull-refresh__text">释放即可刷新...</div>
     </div>
@@ -22,7 +22,7 @@ exports[`change head content when pulling down 2`] = `
 
 exports[`change head content when pulling down 3`] = `
 <div class="van-pull-refresh">
-  <div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
+  <div class="van-pull-refresh__track" style="transition-duration: 300ms; transform: translate3d(0,50px, 0);">
     <div class="van-pull-refresh__head">
       <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 16px; height: 16px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">加载中...</span></div>
     </div>
@@ -32,7 +32,7 @@ exports[`change head content when pulling down 3`] = `
 
 exports[`change head content when pulling down 4`] = `
 <div class="van-pull-refresh">
-  <div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
+  <div class="van-pull-refresh__track" style="transition-duration: 300ms; transform: translate3d(0,50px, 0);">
     <div class="van-pull-refresh__head">
       <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 16px; height: 16px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">加载中...</span></div>
     </div>
@@ -42,7 +42,7 @@ exports[`change head content when pulling down 4`] = `
 
 exports[`change head content when pulling down 5`] = `
 <div class="van-pull-refresh">
-  <div class="van-pull-refresh__track" style="transition: 300ms;">
+  <div class="van-pull-refresh__track" style="transition-duration: 300ms;">
     <div class="van-pull-refresh__head"></div>
   </div>
 </div>
@@ -50,7 +50,7 @@ exports[`change head content when pulling down 5`] = `
 
 exports[`custom content by slots 1`] = `
 <div class="van-pull-refresh">
-  <div class="van-pull-refresh__track" style="transition: 0ms; transform: translate3d(0,20px, 0);">
+  <div class="van-pull-refresh__track" style="transition-duration: 0ms; transform: translate3d(0,20px, 0);">
     <div class="van-pull-refresh__head">pulling 20</div>
   </div>
 </div>
@@ -58,7 +58,7 @@ exports[`custom content by slots 1`] = `
 
 exports[`custom content by slots 2`] = `
 <div class="van-pull-refresh">
-  <div class="van-pull-refresh__track" style="transition: 0ms; transform: translate3d(0,75px, 0);">
+  <div class="van-pull-refresh__track" style="transition-duration: 0ms; transform: translate3d(0,75px, 0);">
     <div class="van-pull-refresh__head">loosing 75</div>
   </div>
 </div>
@@ -66,7 +66,7 @@ exports[`custom content by slots 2`] = `
 
 exports[`custom content by slots 3`] = `
 <div class="van-pull-refresh">
-  <div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
+  <div class="van-pull-refresh__track" style="transition-duration: 300ms; transform: translate3d(0,50px, 0);">
     <div class="van-pull-refresh__head">loading 50</div>
   </div>
 </div>
@@ -74,7 +74,7 @@ exports[`custom content by slots 3`] = `
 
 exports[`not in page top 1`] = `
 <div class="van-pull-refresh">
-  <div class="van-pull-refresh__track" style="transition: 0ms;">
+  <div class="van-pull-refresh__track" style="transition-duration: 0ms;">
     <div class="van-pull-refresh__head"></div>
   </div>
 </div>

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 {

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;

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 (

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;

src/swipe-cell/test/__snapshots__/demo.spec.js.snap

@@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
     </div>
     <div>
       <div class="van-swipe-cell">
-        <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
+        <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
           <div class="van-swipe-cell__left"><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">选择</span></button></div>
           <div class="van-cell van-cell--borderless">
             <div class="van-cell__title"><span>单元格</span></div>
@@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
     </div>
     <div>
       <div class="van-swipe-cell">
-        <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
+        <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
           <div class="van-swipe-cell__left"><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">选择</span></button></div>
           <div class="van-cell van-cell--borderless">
             <div class="van-cell__title"><span>单元格</span></div>

src/swipe-cell/test/__snapshots__/index.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`auto calc width 1`] = `
 <div class="van-swipe-cell">
-  <div class="van-swipe-cell__wrapper" style="transform: translate3d(50px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
+  <div class="van-swipe-cell__wrapper" style="transform: translate3d(50px, 0, 0); transition-duration: .6s;">
     <div class="van-swipe-cell__left">Left</div>
     <div class="van-swipe-cell__right">Right</div>
   </div>
@@ -11,7 +11,7 @@ exports[`auto calc width 1`] = `
 
 exports[`drag and show left part 1`] = `
 <div class="van-swipe-cell">
-  <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
+  <div class="van-swipe-cell__wrapper" style="transform: translate3d(0px, 0, 0); transition-duration: .6s;">
     <div class="van-swipe-cell__left">Left</div>
     <div class="van-swipe-cell__right">Right</div>
   </div>
@@ -20,7 +20,7 @@ exports[`drag and show left part 1`] = `
 
 exports[`drag and show left part 2`] = `
 <div class="van-swipe-cell">
-  <div class="van-swipe-cell__wrapper" style="transform: translate3d(100px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
+  <div class="van-swipe-cell__wrapper" style="transform: translate3d(100px, 0, 0); transition-duration: .6s;">
     <div class="van-swipe-cell__left">Left</div>
     <div class="van-swipe-cell__right">Right</div>
   </div>
@@ -29,7 +29,7 @@ exports[`drag and show left part 2`] = `
 
 exports[`drag and show left part 3`] = `
 <div class="van-swipe-cell">
-  <div class="van-swipe-cell__wrapper" style="transform: translate3d(100px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
+  <div class="van-swipe-cell__wrapper" style="transform: translate3d(100px, 0, 0); transition-duration: .6s;">
     <div class="van-swipe-cell__left">Left</div>
     <div class="van-swipe-cell__right">Right</div>
   </div>
@@ -38,7 +38,7 @@ exports[`drag and show left part 3`] = `
 
 exports[`drag and show left part 4`] = `
 <div class="van-swipe-cell">
-  <div class="van-swipe-cell__wrapper" style="transform: translate3d(100px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
+  <div class="van-swipe-cell__wrapper" style="transform: translate3d(100px, 0, 0); transition-duration: .6s;">
     <div class="van-swipe-cell__left">Left</div>
     <div class="van-swipe-cell__right">Right</div>
   </div>
@@ -47,7 +47,7 @@ exports[`drag and show left part 4`] = `
 
 exports[`drag and show right part 1`] = `
 <div class="van-swipe-cell">
-  <div class="van-swipe-cell__wrapper" style="transform: translate3d(-100px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
+  <div class="van-swipe-cell__wrapper" style="transform: translate3d(-100px, 0, 0); transition-duration: .6s;">
     <div class="van-swipe-cell__left">Left</div>
     <div class="van-swipe-cell__right">Right</div>
   </div>
@@ -56,7 +56,7 @@ exports[`drag and show right part 1`] = `
 
 exports[`render one side 1`] = `
 <div class="van-swipe-cell">
-  <div class="van-swipe-cell__wrapper" style="transform: translate3d(50px, 0, 0); transition: .6s cubic-bezier(0.18, 0.89, 0.32, 1);">
+  <div class="van-swipe-cell__wrapper" style="transform: translate3d(50px, 0, 0); transition-duration: .6s;">
     <div class="van-swipe-cell__left">Left</div>
   </div>
 </div>

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 {