mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 14:39:16 +08:00
[improvement] add slide-down class (#2134)
This commit is contained in:
neverland
GitHub
parent
c8967fc8ed
commit
00458839a2
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<transition name="van-slide-bottom">
|
||||
<transition name="van-slide-up">
|
||||
<div
|
||||
v-if="shouldRender"
|
||||
v-show="value"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`callback events 1`] = `
|
||||
<div class="van-actionsheet" name="van-slide-bottom">
|
||||
<div class="van-actionsheet" name="van-slide-up">
|
||||
<ul class="van-hairline--bottom">
|
||||
<li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span>
|
||||
<!---->
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<transition :name="transition ? 'van-slide-bottom' : ''">
|
||||
<transition :name="transition ? 'van-slide-up' : ''">
|
||||
<div
|
||||
v-show="show"
|
||||
:style="style"
|
||||
|
||||
@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">
|
||||
弹出默认键盘
|
||||
</span></button>
|
||||
<div name="van-slide-bottom" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
|
||||
<div name="van-slide-up" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
|
||||
<div class="van-hairline--top van-number-keyboard__title"><span></span> <span class="van-number-keyboard__close">完成</span></div>
|
||||
<div class="van-number-keyboard__body">
|
||||
<i class="van-hairline van-key">1</i>
|
||||
@ -29,7 +29,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<button class="van-button van-button--default van-button--normal"><span class="van-button__text">
|
||||
弹出自定义键盘
|
||||
</span></button>
|
||||
<div name="van-slide-bottom" class="van-number-keyboard van-number-keyboard--custom" style="z-index:100;display:none;">
|
||||
<div name="van-slide-up" class="van-number-keyboard van-number-keyboard--custom" style="z-index:100;display:none;">
|
||||
<!---->
|
||||
<div class="van-number-keyboard__body">
|
||||
<i class="van-hairline van-key">1</i>
|
||||
|
||||
@ -26,7 +26,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</ul>
|
||||
<div class="van-password-input__info">密码为 6 位数字</div>
|
||||
</div>
|
||||
<div name="van-slide-bottom" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
|
||||
<div name="van-slide-up" class="van-number-keyboard van-number-keyboard--default" style="z-index:100;">
|
||||
<!---->
|
||||
<div class="van-number-keyboard__body">
|
||||
<i class="van-hairline van-key">1</i>
|
||||
|
||||
@ -1,15 +1,27 @@
|
||||
@keyframes van-slide-bottom-enter {
|
||||
@keyframes van-slide-up-enter {
|
||||
from {
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes van-slide-bottom-leave {
|
||||
@keyframes van-slide-up-leave {
|
||||
to {
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes van-slide-down-enter {
|
||||
from {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes van-slide-down-leave {
|
||||
to {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes van-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -50,12 +62,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
.van-slide-bottom {
|
||||
.van-slide-up {
|
||||
&-enter-active {
|
||||
animation: van-slide-bottom-enter .3s both ease;
|
||||
animation: van-slide-up-enter .3s both ease;
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
animation: van-slide-bottom-leave .3s both ease;
|
||||
animation: van-slide-up-leave .3s both ease;
|
||||
}
|
||||
}
|
||||
|
||||
.van-slide-down {
|
||||
&-enter-active {
|
||||
animation: van-slide-down-enter .3s both ease;
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
animation: van-slide-down-leave .3s both ease;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,30 +9,28 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('animation')">
|
||||
<van-switch-cell
|
||||
v-model="show"
|
||||
:title="$t('toggle')"
|
||||
:border="false"
|
||||
<van-cell
|
||||
is-link
|
||||
title="Fade"
|
||||
@click="animate('van-fade')"
|
||||
/>
|
||||
<van-cell
|
||||
is-link
|
||||
title="Slide Up"
|
||||
@click="animate('van-slide-up')"
|
||||
/>
|
||||
<van-cell
|
||||
is-link
|
||||
title="Slide Down"
|
||||
@click="animate('van-slide-down')"
|
||||
/>
|
||||
<van-row>
|
||||
<transition name="van-fade">
|
||||
<van-col
|
||||
v-show="show"
|
||||
span="8"
|
||||
>
|
||||
Fade
|
||||
</van-col>
|
||||
</transition>
|
||||
|
||||
<transition name="van-slide-bottom">
|
||||
<van-col
|
||||
v-show="show"
|
||||
span="8"
|
||||
>
|
||||
Slide Bottom
|
||||
</van-col>
|
||||
</transition>
|
||||
</van-row>
|
||||
<transition :name="transitionName">
|
||||
<div
|
||||
v-show="show"
|
||||
class="demo-animate-block"
|
||||
/>
|
||||
</transition>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -58,8 +56,20 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: true
|
||||
show: false,
|
||||
transitionName: ''
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
animate(transitionName) {
|
||||
this.show = true;
|
||||
this.transitionName = transitionName;
|
||||
|
||||
setTimeout(() => {
|
||||
this.show = false;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -83,19 +93,15 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.van-col {
|
||||
height: 50px;
|
||||
color: @white;
|
||||
font-size: 14px;
|
||||
.demo-animate-block {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: fixed;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
margin-left: 15px;
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
|
||||
.van-switch-cell {
|
||||
margin-bottom: 15px;
|
||||
margin: -50px 0 0 -50px;
|
||||
background-color: @blue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -41,8 +41,13 @@ Add 1px border under the Retina screen for the element, based on a pseudo elemen
|
||||
<div v-show="visible">Fade</div>
|
||||
</transition>
|
||||
|
||||
<!-- slide bottom -->
|
||||
<transition name="van-slide-bottom">
|
||||
<div v-show="visible">Fade</div>
|
||||
<!-- slide up -->
|
||||
<transition name="van-slide-up">
|
||||
<div v-show="visible">Slide Up</div>
|
||||
</transition>
|
||||
```
|
||||
|
||||
<!-- slide down -->
|
||||
<transition name="van-slide-down">
|
||||
<div v-show="visible">Slide Down</div>
|
||||
</transition>
|
||||
```
|
||||
|
||||
@ -40,8 +40,13 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
|
||||
<div v-show="visible">Fade</div>
|
||||
</transition>
|
||||
|
||||
<!-- 下滑 -->
|
||||
<transition name="van-slide-bottom">
|
||||
<div v-show="visible">Fade</div>
|
||||
<!-- 上滑进入 -->
|
||||
<transition name="van-slide-up">
|
||||
<div v-show="visible">Slide Up</div>
|
||||
</transition>
|
||||
```
|
||||
|
||||
<!-- 下滑进入 -->
|
||||
<transition name="van-slide-down">
|
||||
<div v-show="visible">Slide Down</div>
|
||||
</transition>
|
||||
```
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user