blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 41 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/checkbox/index.less
View File

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

2
src/collapse-item/index.less
View File

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

1
src/dialog/index.less
View File

@ -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;

2
src/image-preview/ImagePreview.js
View File

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

1
src/image-preview/index.less
View File

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

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

@ -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>

2
src/list/test/__snapshots__/demo.spec.js.snap
View File

@ -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">

2
src/pull-refresh/index.js
View File

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

1
src/pull-refresh/index.less
View File

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

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

@ -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>

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

@ -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>

3
src/radio/index.less
View File

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

2
src/style/var.less
View File

@ -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;

2
src/swipe-cell/index.js
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 (

5
src/swipe-cell/index.less
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;

4
src/swipe-cell/test/__snapshots__/demo.spec.js.snap
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>

14
src/swipe-cell/test/__snapshots__/index.spec.js.snap
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>

2
src/switch/index.less
View File

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