// 蒙层部分
@keyframes slideBgUp {
from {
visibility: visible;
background: transparent;
}
to {
background: rgba(0,0,0,.7);
}
}
@keyframes slideBgDown {
from {
background: rgba(0, 0 ,0 , .7);
}
to {
background: transparent;
visibility: hidden;
}
}
.mask, .mask_down {
position: fixed;
top: 0;
left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
animation: slideBgUp 0.3s ease-in both;
}
.mask_down {
animation: slideBgDown 0.3s ease-in both;
}
// 内容部分
// 浏览器坐标系是y轴向下为正,x轴向右为正,z轴是屏幕到用户的眼睛的方向为正
@keyframes slideContentUp {
from {
// max-height: 0; 实现方法1,把内容最大高度设为0
transform: translate3d(0, 100%, 0); // 实现方法2,把内容整体向下移动
// 此时其他的css中已经把内容容器定位到了底部
}
to {
// max-height: 1000px; 设置足够的最大高度
transform: translate3d(0, 0, 0); // 把内容整体回到原来的状态
}
}
@keyframes slideContentDown {
from {
transform: translate3d(0, 0, 0);
// max-height: 1000px;
}
to {
// max-height: 0;
transform: translate3d(0, 100%, 0);
}
}
.pop{
animation: slideContentUp 0.3s ease-in both;
position: absolute;
bottom: 0;
border-radius: 24px 24px 0 0;
overflow: hidden;
}
.pop_down {
animation: slideContentDown 0.3s ease-in both;
position: absolute;
bottom: 0;
border-radius: 24px 24px 0 0;
overflow: hidden;
}
示例1
{
maskVisible ?
(
<View className={maskVisible ? styles.mask : styles.mask_down}
onClick={this.changeVisible}>
<View className={maskVisible ? styles.pop : styles.pop_down }>
<ComonentContent onclick={this.changeVisible}/>
</View>
</View>
) : null
}
// 思考
// 上面的形式弹出时没有问题,但是弹回时就不会出现动画
// 因为maskVisible 控制着内容的挂载,为false时内容被直接卸载
// 所以不会出现弹回的动画
// 总述上面的是不完整的弹窗动画实现
// 知道了原因,笔者暂时想到有两种方法实现
// 第一种改变内容的显示模式
// 做出修改的关键部分
{
<View className={maskVisible ? styles.mask : styles.mask_down}
// style={animaFlag ? {visibility: "hidden"} : ''}
// 为了避免第一次加载时会出现动画效果
style={animaFlag ? {visibility: "hidden"} : ''}
onClick={this.changeVisible}>
<View className={maskVisible ? styles.pop : styles.pop_down }>
<ComonentContent onclick={this.changeVisible}/>
</View>
</View>
}
// 第二种
// 在示例1中通过动画时间判断是否把maskVisible 设置为false
// 比如弹回的动画时间为0.3s
// 可以通过setTimeout 的回调中把maskVisible 设置为false
// 由于比较复杂大家可以去试一下
版权声明:本文为kyyius原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。