关于javascript:原生JavaScript实现Vue的transition-fade过渡动画效果

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