Vue有一个过渡动画，很多网页都在用，次要是体验还不错，所以很多应用Vue构建的页面如果思考应用动画，根本就会应用这个fade动画，我当初应用原生的JavaScript来实现。

代码

<style>.page {  opacity: 0;  transition: opacity 0.5s, transform 0.5s;  transform: translateY(100%);}.page.visible {  opacity: 1;  transform: translateY(0);}.fade {  opacity: 0;  transform: translateY(10%);  transition: opacity 0.5s, transform 0.5s;}@keyframes fadeAnimation {  0% { opacity: 0; transform: translateY(10%); }  100% { opacity: 1; transform: translateY(0); }}.fade.show {  opacity: 1;  transform: translateY(0);}#page-content{    width: 800px;}#app{    width: 800px;    height: 600px;    margin: 100px auto;    padding: 20px 20px;    background: #eee;}#app .nav{    width: 200px;    height: 600px;    float: left;}#app .nav button{    width: 200px;    height: 40px;    margin: 0 auto 10px;    background: #39f;    color: #fff;    font-size: 15px;    outline: none;    cursor: pointer;    border: none;    border-radius: 5px;}#page-content{    width: 550px;    height: 600px;    float: right}</style><script type="text/javascript">var pageData = [  {'Page1': '请留神，上述示例中的动画成果是通过CSS的动画来实现的，而不是应用原生JavaScript逐帧解决动画。这种形式能够更不便地应用CSS来定义和治理动画成果，但具体的实现形式会依据你的需要和设计来定制。你能够依据须要进行调整和扩大，以满足你的具体需要。'},  {'Page2': '在下面的示例中，咱们增加了一个名为fade的CSS类，用于利用淡入淡出的动画成果。应用animation属性指定了名为fadeAnimation的动画，并设置了持续时间为0.5秒。@keyframes规定定义了fadeAnimation动画的关键帧。在0%时，页面内容元素的透明度为0，向下挪动50%；在100%时，透明度为1，不再进行垂直位移。这样就实现了从下往上的淡入成果。'},  {'Page3': 'avaScript局部的changePage函数接管一个页面索引作为参数，依据索引从pageData数组中获取相应的页面数据。而后，咱们通过操作page-content元素的textContent属性，将页面内容更新为对应页面的值。'}];window.onload=function(){    // 进入页面加载    changePage(0);}function changePage(pageIndex) {  var pageContent = document.getElementById('page-content');  var page = pageData[pageIndex];  var key = Object.keys(page)[0];  var value = page[key];    pageContent.classList.remove('show');  setTimeout(function() {    pageContent.textContent = value;    pageContent.classList.add('show');  }, 300);}</script><div id="app">    <div class="nav">        <button onclick="changePage(0)">Page 1</button>        <button onclick="changePage(1)">Page 2</button>        <button onclick="changePage(2)">Page 3</button>    </div>    <div id="page-content" class="fade"></div></div>

成果

动态图：

本文作者

TANKING