css3过渡与动画个人案例——弹入窗口

前言

变形、旋转、转换、过渡和动画是现在前端必备的技能之一，也是为了更加便捷作出较为美观的页面。

因此个人会实践日常工作可能实现的功能作为例子让我们更加熟悉变形、旋转、转换、过渡和动画。以下是两者的相关叙述
《CSS3动画》、《CSS3过渡》、《CSS3变形、转换、旋转》

1.gif

HTML

<div id="main">
  <button type="button" class="press">点击弹出</button>
  <div id="contain">
    <button class="end">X</button>
  </div>
</div>

JS

let pre=document.querySelector(".press")//点击按钮
let end=document.querySelector(".end")//退出按钮
pre.addEventListener("click",clickChange)
end.addEventListener("click",clickChange)
//点击事件触发方法，添加或删除样式
function clickChange(){
  let change=document.querySelector("#main").classList
  let contain=document.querySelector("#contain").classList
  change.contains("change")?  change.remove("change"):change.add("change")
  contain.contains("change")?contain.remove("change"):contain.add("change")
}

CSS

html,body{
padding: 0;
margin: 0;
}
body{
background-color: #C3BED4;
background-size: 100% 100%;
}
#main{
height: 100vh;/*取视高*/
display: flex;
justify-content: center;
align-items: center;
font-size: large;
font-family: "arial, helvetica, sans-serif";
color: #42B983;
}
#main.change::before {/*添加change样式后的before伪元素，作为点击后的背景阴影*/
content: "";
position: absolute;/*z-index必须有position:absolute*/
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
background-color: #fff;
animation:my-animation 1s ;/*定义动画名称和时长*/
opacity: 0.6;
}
@keyframes my-animation{/*动画规则*/
from{
opacity: 0;
}
to{
opacity: 0.6;
}
}
.press{/*点击按钮的样式*/
display: block;
width: 80px;
height: 30px;
border-radius: 10px;
background-color:#FFE4C4;
font-family: "arial black";
font-weight: bold;
color: #3079AB;
}
#contain{/*窗口的设定，此时的top为-50%*/
position: absolute;
z-index: 1000;
top: -50%;
left: 50%;
height: 200px;
width: 240px;
transform: translate(-50%,-50%);
background-color: #FD5B78;
border: solid #F7F7F7 6px;
border-radius: 10px;
display: flex;
flex-direction: row-reverse;
transition: top 1s;/*top的过渡*/
}
#contain.change{/*点击按钮添加样式后的窗口样式，top为50%*/
position: absolute;
z-index: 1000;
top: 50%;
left: 50%;
height: 200px;
width: 240px;
transform: translate(-50%,-50%);
background-color: #FD5B78;
border: solid #F7F7F7 6px;
border-radius: 10px;
display: flex;
flex-direction: row-reverse;
}
.end{
width: 30px;
height: 30px;
display: block;
border: solid #E9E9E9 2px;
background-color: #FA8072;
}