alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

perf: add transition-property (#4389)

Browse Source
This commit is contained in:
neverland
2019-09-06 19:50:12 +08:00
committed by GitHub
parent 33652b1e84
commit b4371a52d4
18 changed files with 41 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/swipe-cell/index.js
+1 -1
View File
@@ -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
+5
View File
@@ -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
+2 -2
View File
@@ -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
+7 -7
View File
@@ -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>