css从底部弹出的popup实现

本文以介绍思想为主，只要有这个思路，实现其他popup效果也比较容易。代码仅供参考。

动效

• 黑色蒙层先展示出来
• 底部展示模块从下到上展示

实现

整体布局代码。当变量open为true的时候，popup出现

<div className={contain,{active:open}}>
    <div className='modelBack'/>  // 蒙层
    <div className='info'>信息展示</div>
</div>

详细css代码如下。

最外层contain

.contain{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%; 
  z-index: 100;
  transform: translateY(100%); Y轴平移100%隐藏
}

当open为true的时候，再平移上来
.active{
    transform: translateY(0);
}

蒙层代码： 因为父布局是绝对布局了，所以子布局的绝对布局，会相对父布局来定位

.modelBack{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .5);
}

信息内容展示： 下面当active被赋值在父组件的时候，info会变成active的子组件，从而将从下到上的动画效果展示出来

.info{
  left: 0;
  right: 0;
  bottom: 0;  底部对齐
  z-index: 1;
  transform: translateY(100%);  从100% --->
  transition: all linear 0.25s;  动画转化过程的时间
}
.active .info{  这里并列的意思是，info作为active的子节点，会展示出下面的样式
    transform: translateY(0);  --->到0%
}