1、第一步，将布局写好如下：<!doctype html><html><head><meta charset="UTF-8"><title>demo</title><link rel="stylesheet" type="text/css" href="sidebar.css"></head><body><div class='sidebar fullHeight'>sidebar</div><div><div><button onclick="fadeIn()">淡进</button><button onclick="fadeOut()">淡出</button></div><div><button onclick="fadeInUp()">向上淡进</button><button onclick="fadeOutLeft()">向左淡出</button></div></div><script src="sidebarEffects.js"></script></body></html>
2、第二步加入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>
3、样式代码以及动画代码如下：/* 动画绑定 */.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;}
