我有一个用 Bootstrap 制作的 3 列模板，我正在尝试正确制作动画。我确定我错过了一些简单的东西，但无法弄清楚，可以使用一些反馈。我只是想让左侧的画布菜单通过滑入来制作动画。我已经尝试弄乱每个div并对其进行动画处理，但它仍然无法动画化。我尝试在线搜索，但找不到任何可能对我有帮助的东西。我感谢任何建议。 .HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/pwrpg.css">
<title>Hello, world!</title>
</head>
<body>
<header class="header-container bg-success">header<a href="javascript:void(0)" onclick="openNav()">open</a><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Close</a></header>
<div class="wrapper">
<section class="content">
<div class="columns">
<main class="main" id="main">Content: Flexible width
<div class="box"></div>
</main>
<aside class="sidebar-first" id="sidebar-first">Sidebar first: Fixed width<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Close</a></aside>
<aside class="sidebar-second">Sidebar second: Fixed width</aside>
</div>
</section>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="js/pwrpg.js"></script>
</body>
</html>
.CSS
/* Layout Containers */
.header-container{position: relative;height:50px;}
body{
margin: 0;
}
.wrapper{
min-height: 100vh;
background: #ccc;
display: flex;
flex-direction: column;
}
.content {
display: flex;
flex: 1;
background: #999;
color: #000;
transition: all 0.3s ease-in-out;
}
.columns{
display: flex;
flex:1;
}
.main{
flex: 1;
order: 2;
background: #eee;
transition: margin-left .5s;
padding: 20px;
}
.sidebar-first{
width: 260px;
background: #ccc;
order: 1;
transition: all .25s ease-out;
}
.sidebar-second{
width: 260px;
order: 3;
background: #ddd;
}
.sidebar-first .closebtn {
font-size: 36px;
}
@media (max-width: 991.99px) {
.sidebar-first, .sidebar-second {display:none;transition: all .25s ease-out;}
.main {
position: relative;
transition: all .25s ease-out;
}
}
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: green;
cursor: pointer;
}
.JS
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("sidebar-first").style.width = "260px";
document.getElementById("sidebar-first").style.display = "block";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("sidebar-first").style.width = "260px";
document.getElementById("sidebar-first").style.display = "none";
}
在转换元素时不要使用"display： none;"。您所做的只是显示/隐藏某些内容，而不是在样式之间平滑过渡。
如果你想对事物进行动画处理，请购买在要转换的元素上添加一个CSS类，而不是在JS中更改这些元素的样式。
例如，要从左侧滑入某些内容：
#my-sidebar {
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
transition: all 0.4s ease;
}
#my-sidebar.transition-in {
opacity: 1;
pointer-events: all;
transform: translateX(0);
}