html transtion 过渡
代码片.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
div{
width: 100%;
height: 100%;
position: absolute;
text-align: center;
padding-top: 35%;
transition: all 2s;
}
#div1{
background: rgb(236, 151, 90);
left: 0;
}
#div2{
background: darkcyan;
left: 100%;
}
a{
text-decoration: none;
font-size: 30pt;
font-weight: bolder;
color: white;
}
#div1.move{
left: -100%;
}
#div2.move{
left: 0;
}
</style>
<script>
window.onload = function () {
let list = document.querySelectorAll('a');
for(let a of list){
a.onclick = function(){
event.preventDefault();
toggleClass('div1','move');
toggleClass('div2','move');
}
}
function toggleClass(id,className){
let dom = document.querySelector('#' + id);
if(dom.className == className){
dom.className = '';
}else{
dom.className = className;
}
}
}
</script>
</head>
<body>
<div id="div1">
<a href="#div2">next</a>
</div>
<div id="div2">
<a href="#div1">last</a>
</div>
</body>
</html>