Wyn V6.0 帮助文档
页面树结构
进行全文检索
转至元数据结尾
转至元数据起始

基于上一节示例二：集成时自定义组件的外观样式，这一节我们继续为组件添加自定义动画。

1. 添加动画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();

2. 增强动画


我们已经制作除了简单的动画效果。现在，我们可以每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事件仍然有效）。然后将事件侦听器添加到每个组件。

当所有组件都可以渲染时运行动画，这样您将获得更好的动画效果。


下面是示例源代码。

animation.zip


  • 无标签