具体效果可以上百度云下载查看：
链接：https://pan.baidu.com/s/1ftkx_fRu5BLkD97DWgQpWw
提取码：1na6
css代码：
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
html,body{
width: 100%;
height: 100%;
position: relative;
}
.pageContent{
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
background: #f2f2f2;
}
.baseRule_btn{
position: absolute;
right: 0;
background: #2f6fb7;
color: #ffffff;
font-size: 0.8rem;
line-height: 1.5rem;
padding: 0.5rem 0.2rem 0.5rem 0.5rem;
border-bottom-left-radius: 0.6rem;
border-top-left-radius: 0.6rem;
}
.baseRule{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
display: flex;
align-items: center;
transform: scale(0);
transition: transform 1s;
}
.baseRule_contents{
width: 95%;
height: 55%;
margin-left: 5%;
overflow: hidden;
}
.baseRule_contents_hideBtn{
float: left;
width: 8%;
display: flex;
align-items: center;
background: #2f6fb7;
height: -webkit-fill-available;
border-bottom-left-radius: 0.6rem;
border-top-left-radius: 0.6rem;
}
.baseRule_contents_hideBtn span{
display: inline-block;
width: 0px;
border-style: solid;
border-width: 8px 10px 8px;
border-color: transparent transparent transparent #fff;
margin-left: 0.6rem;
}
.baseRule_contents_words{
float: left;
width: 82%;
padding: 0% 5%;
background: #f2f2f2;
font-size: 0.9rem;
line-height: 1.35rem;
color: #444;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: flex;
align-items: center;
}
.baseRule_contents_words_box{
height: 87%;
overflow-y: auto;
}
body体代码：
<div class="pageContent">
<!--按钮-->
<div class="baseRule_btn JS-baseRule_btn">
<div>点</div>
<div>击</div>
<div>按</div>
<div>钮</div>
</div>
<!--点击按钮之后出现的内容-->
<div class="baseRule">
<div class="baseRule_contents">
<div class="baseRule_contents_hideBtn JS-baseRule_contents_hideBtn"><span></span></div>
<div class="baseRule_contents_words">
<div class="baseRule_contents_words_box">
噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。
问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！
剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
</div>
</div>
</div>
</div>
</div>
script代码：
$(".JS-baseRule_btn").unbind("click").click(function(){
baseRule_btn_width = $(".baseRule_btn").innerWidth();//按钮的宽度
console.log(baseRule_btn_width)
$(".baseRule").stop().animate({left:"0"},1000);
for(var i=0.001;i<=1;i=i+0.001){
$(".baseRule").css("transform","scale("+i+")");
if(parseFloat(i).toFixed(3)==0.999){
$(".baseRule").css("transform","scale(1)");
}
}
// $(".baseRule_btn").css("right","-"+baseRule_btn_width+"px");
$(".baseRule_btn").stop().animate({right:"-"+baseRule_btn_width+"px"},1000);
})
$(".JS-baseRule_contents_hideBtn").unbind("click").click(function(){
$(".baseRule").stop().animate({left:"100%"},1000);
setTimeout(function(){
$(".baseRule").css("transform","scale(0)");
$(".baseRule_btn").stop().animate({right:"0"},1000);
},1000);
})
