From b567a2a563ae92f1edec5f506a984a4f531e9223 Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 26 Nov 2018 16:47:44 +0800 Subject: [PATCH 01/11] [improvement] CouponCell: remove wrapper (#2145) --- packages/coupon-cell/index.vue | 15 ++++----- packages/coupon-list/Item.vue | 2 +- packages/coupon-list/en-US.md | 2 +- .../test/__snapshots__/demo.spec.js.snap | 16 ++++------ .../test/__snapshots__/index.spec.js.snap | 32 ++++++++----------- packages/coupon-list/zh-CN.md | 2 +- 6 files changed, 30 insertions(+), 39 deletions(-) diff --git a/packages/coupon-cell/index.vue b/packages/coupon-cell/index.vue index 923d5d82e..c6350a29b 100644 --- a/packages/coupon-cell/index.vue +++ b/packages/coupon-cell/index.vue @@ -1,15 +1,12 @@ @@ -79,6 +81,12 @@ export default { .demo-icon { font-size: 0; + &-list { + padding-top: 10px; + box-sizing: border-box; + min-height: calc(100vh - 65px); + } + .van-col { float: none; text-align: center; @@ -94,7 +102,7 @@ export default { .van-icon { font-size: 32px; margin: 15px 0; - color: rgba(69, 90, 100, .8); + color: rgba(69, 90, 100, 0.8); } span { From db224f5c7733af727fcfac8056d67b400da1ee30 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 27 Nov 2018 19:12:13 +0800 Subject: [PATCH 11/11] [improvement] add more transition class (#2163) --- packages/style/animation.less | 44 +++++++++++++++++++++++++++++++++++ packages/style/demo/index.vue | 24 +++++++++++++------ packages/style/en-US.md | 10 ++++++++ packages/style/zh-CN.md | 10 ++++++++ 4 files changed, 81 insertions(+), 7 deletions(-) diff --git a/packages/style/animation.less b/packages/style/animation.less index c888f6aa9..ce04b672f 100644 --- a/packages/style/animation.less +++ b/packages/style/animation.less @@ -22,6 +22,30 @@ } } +@keyframes van-slide-left-enter { + from { + transform: translate3d(-100%, 0, 0); + } +} + +@keyframes van-slide-left-leave { + to { + transform: translate3d(-100%, 0, 0); + } +} + +@keyframes van-slide-right-enter { + from { + transform: translate3d(100%, 0, 0); + } +} + +@keyframes van-slide-right-leave { + to { + transform: translate3d(100%, 0, 0); + } +} + @keyframes van-fade-in { from { opacity: 0; @@ -81,3 +105,23 @@ animation: van-slide-down-leave .3s both ease; } } + +.van-slide-left { + &-enter-active { + animation: van-slide-left-enter .3s both ease; + } + + &-leave-active { + animation: van-slide-left-leave .3s both ease; + } +} + +.van-slide-right { + &-enter-active { + animation: van-slide-right-enter .3s both ease; + } + + &-leave-active { + animation: van-slide-right-leave .3s both ease; + } +} diff --git a/packages/style/demo/index.vue b/packages/style/demo/index.vue index 53da6782c..502cfab4f 100644 --- a/packages/style/demo/index.vue +++ b/packages/style/demo/index.vue @@ -24,14 +24,24 @@ title="Slide Down" @click="animate('van-slide-down')" /> - - -
- + + + + +
+ diff --git a/packages/style/en-US.md b/packages/style/en-US.md index c94ca642b..3bc501360 100644 --- a/packages/style/en-US.md +++ b/packages/style/en-US.md @@ -50,4 +50,14 @@ Add 1px border under the Retina screen for the element, based on a pseudo elemen
Slide Down
+ + + +
Slide Left
+
+ + + +
Slide Right
+
``` diff --git a/packages/style/zh-CN.md b/packages/style/zh-CN.md index b073c9feb..321653151 100644 --- a/packages/style/zh-CN.md +++ b/packages/style/zh-CN.md @@ -49,4 +49,14 @@ Vant 中默认包含了一些常用样式,可以直接通过 className 的方
Slide Down
+ + + +
Slide Left
+
+ + + +
Slide Right
+
```