perf: add transition-property (#4389)

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
+1 -1
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
View File
@@ -13,6 +13,7 @@
right: 0;
bottom: 0;
left: 0;
transition-property: transform;
.van-image__loading {
background-color: transparent;
@@ -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>