示例三：集成时为组件添加自定义动画
基于上一节示例二：集成时自定义组件的外观样式，这一节我们继续为组件添加自定义动画。
添加动画CSS
使用以下内容替换 app.css。我们为元素添加了一些过渡效果，以使组件元素呈现出动画。
app.css
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#demo {
overflow: hidden;
height: 100%;
position: relative;
}
.center-container {
width: 1200px;
height: 400px;
border: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.center {
width: 400px;
height: 400px;
margin: 0 auto;
}
.center-scenario {
width: 300px;
position: absolute;
transform: translateX(0);
opacity: 1;
transition: opacity ease 1s, transform ease 1s;
}
.center-left-scenario-before {
transform: translateX(-170px);
opacity: 0;
}
.center-right-scenario-before {
transform: translateX(170px);
opacity: 0;
}
#scenario-0 {
right: 110px;
top: 0;
height: 120px;
}
#scenario-1 {
right: 110px;
top: 130px;
height: 140px;
}
#scenario-2 {
right: 110px;
bottom: 0;
height: 120px;
}
#scenario-3 {
left: 120px;
top: 0;
height: 160px;
}
#scenario-4 {
left: 120px;
bottom: 0;
height: 160px;
}
.left-panel {
position: absolute;
left: 0;
top: 250px;
bottom: 0;
width: 300px;
transition: transform ease 1s;
transform: translateX(0);
}
.left-panel.hide {
transform: translateX(-300px);
}
.left-scenario {
height: 200px;
}
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
}在执行动画之前初始化 html 元素的样式。
<main id="demo">
<header id="header"></header>
<div class="center-container">
<div class="center" id="center"></div>
<div class="center-scenario center-right-scenario-before" id="scenario-0"></div>
<div class="center-scenario center-right-scenario-before" id="scenario-1"></div>
<div class="center-scenario center-right-scenario-before" id="scenario-2"></div>
<div class="center-scenario center-left-scenario-before" id="scenario-3"></div>
<div class="center-scenario center-left-scenario-before" id="scenario-4"></div>
</div>
<div class="left-panel hide" id="left-panel">
<div class="left-scenario" id="scenario-5"></div>
<div class="left-scenario" id="scenario-6"></div>
<div class="left-scenario" id="scenario-7"></div>
</div>
</main>在载入仪表板之后开始动画。
app.js
...
scenario5.connect(scenarioDom5);
scenario6.connect(scenarioDom6);
scenario7.connect(scenarioDom7);
const leftPanel = document.querySelector('#left-panel');
dash.on('mounted', () => {
scenarioDom0.classList.remove('center-right-scenario-before');
scenarioDom1.classList.remove('center-right-scenario-before');
scenarioDom2.classList.remove('center-right-scenario-before');
scenarioDom3.classList.remove('center-left-scenario-before');
scenarioDom4.classList.remove('center-left-scenario-before');
leftPanel.classList.remove('hide');
});
// make dashboard render
dash.refresh();增强动画
我们已经制作除了简单的动画效果。现在，我们可以每0.3秒显示出一个组件。
接下来，添加这些实用的程序功能。
app.js
function makeDelay(interval) {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, interval);
});
}
function makeRunner(n, cb) {
let count = 0;
return () => {
count++;
if (count === n) {
cb();
}
};
}用下面的代码块替换之前的代码。
app.js
...
scenario5.connect(scenarioDom5);
scenario6.connect(scenarioDom6);
scenario7.connect(scenarioDom7);
const leftPanel = document.querySelector('#left-panel');
const done = makeRunner(9, () => {
dash.resume();
const DELAY = 300;
makeDelay(DELAY).then(() => {
scenarioDom0.classList.remove('center-right-scenario-before');
return makeDelay(DELAY);
}).then(() => {
scenarioDom1.classList.remove('center-right-scenario-before');
return makeDelay(DELAY);
}).then(() => {
scenarioDom2.classList.remove('center-right-scenario-before');
return makeDelay(DELAY);
}).then(() => {
scenarioDom3.classList.remove('center-left-scenario-before');
return makeDelay(DELAY);
}).then(() => {
scenarioDom4.classList.remove('center-left-scenario-before');
return makeDelay(DELAY);
}).then(() => {
leftPanel.classList.remove('hide');
});
});
center.on('update', done);
header.on('update', done);
scenario0.on('update', done);
scenario1.on('update', done);
scenario2.on('update', done);
scenario3.on('update', done);
scenario4.on('update', done);
scenario5.on('update', done);
scenario6.on('update', done);
dash.suspend();
// make dashboard render
dash.refresh();Update事件总是在组件渲染之前被触发。
因此，我们暂停了仪表板（这样就不会渲染组件，但是update事件仍然有效）。然后将事件侦听器添加到每个组件。
当所有组件都可以渲染时运行动画，这样您将获得更好的动画效果。
下面是示例源代码。