CSS3实现侧边栏展开收起动画

2020-11-27 来源：汇智旅游网

这篇文章主要介绍了如何使用CSS3 实现侧边栏展开收起动画，并附上了示例代码，非常的详细，推荐给需要的小伙伴。

@keyframes

规则用于创建动画。

@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

@keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称
规定动画的时长
animation
animation 属性是一个简写属性，用于设置动画属性：

animation-name：规定 @keyframes 动画的名称。
animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function：规定动画的速度曲线。默认是 "ease"。
animation-delay：规定动画何时开始。默认是 0
animation-iteration-count：规定动画被播放的次数。默认是 1。
animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-fill-mode：规定对象动画时间之外的状态

侧边栏实现

/* 动画定义 */
@-webkit-keyframes move_right {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 -webkit-transform: translateX(120px);
 transform: translateX(120px);
 }
}
@keyframes move_right {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 -webkit-transform: translateX(120px);
 transform: translateX(120px);
 }
}
@-webkit-keyframes move_left {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 -webkit-transform: translateX(-120px);
 transform: translateX(-120px);
 }
}
@keyframes move_left {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 -webkit-transform: translateX(-120px);
 transform: translateX(-120px);
 }
}
@-webkit-keyframes move_up {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 -webkit-transform: translateY(-250px);
 transform: translateY(-250px);
 }
}
@keyframes move_up {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 -webkit-transform: translateY(-250px);
 transform: translateY(-250px);
 }
}

/* 动画绑定 */
 .move_right {
 -webkit-animation-name : move_right;
 animation-name : move_right;
 -webkit-animation-duration : 1s;
 animation-duration : 1s;
 -webkit-animation-iteration-count : 1;
 animation-iteration-count : 1;
 -webkit-animation-fill-mode : forwards;
 animation-fill-mode : forwards;
 }
 .move_left {
 -webkit-animation-name : move_left;
 animation-name : move_left;
 -webkit-animation-duration : 1s;
 animation-duration : 1s;
 -webkit-animation-iteration-count : 1;
 animation-iteration-count : 1;
 -webkit-animation-fill-mode : forwards;
 animation-fill-mode : forwards;
 }
 .move_up {
 -webkit-animation-name : move_up;
 animation-name : move_up;
 -webkit-animation-duration : 1s;
 animation-duration : 1s;
 -webkit-animation-iteration-count : 1;
 animation-iteration-count : 1;
 -webkit-animation-fill-mode : forwards;
 animation-fill-mode : forwards;
 }
 .fadeIn {
 -webkit-transform : translateX(120px);
 transform : translateX(120px); 
 opacity: 1;
 }
 .fadeInUp {
 -webkit-transform : translateY(-250px);
 transform : translateY(-250px);
 opacity: 1;
 -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 
 transition :transform .2s ease-out, opacity .2s ease-out;
 }
 .fadeOutLeft {
 -webkit-transform : translateX(-120px);
 transform : translateX(-120px); 
 opacity: 0.0;
 -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 
 transition :transform .2s ease-out, opacity .2s ease-out;
 }

html

<!doctype html>
 <html lang="en" class="fullHeight">
 <head>
 <meta charset="UTF-8">
 <title>demo</title>
 <link rel="stylesheet" type="text/css" href="sidebar.css">
 </head>
 <body class="fullHeight">
 <p class='sidebar fullHeight'>sidebar</p>
 <p class="controller">
 <p>
 <button onclick="fadeIn()">淡进</button>
 <button onclick="fadeOut()">淡出</button>
 </p>
 <p>
 <button onclick="fadeInUp()">向上淡进</button>
 <button onclick="fadeOutLeft()">向左淡出</button>
 </p>
 </p>
 <script src="sidebarEffects.js"></script>
 </body>
 </html>

加入JS

<script>
 var sidebarEl = document.querySelector(".sidebar");
 function fadeIn (e) {
 sidebarEl.className = 'sidebar fullHeight';
 sidebarEl.style.top = '0px';
 sidebarEl.style.left = '0px';
 sidebarEl.classList.add('move_right');
 }
 function fadeOut (e) {
 sidebarEl.className = 'sidebar fullHeight';
 sidebarEl.style.left = '120px';
 sidebarEl.classList.add('move_left');
 }
 function fadeInUp(e) {
 sidebarEl.className = 'sidebar fullHeight';
 sidebarEl.style.top = '250px';
 sidebarEl.style.left = '120px';
 sidebarEl.classList.add('move_up');
 }
 function fadeOutLeft(e) {
 sidebarEl.className = 'sidebar fullHeight';
 sidebarEl.style.top = '0px';
 sidebarEl.style.left = '120px';
 sidebarEl.classList.add('move_left');
 }
 </script>

显示全文

全部栏目

CSS3实现侧边栏展开收起动画