原生JS实现Vue transition fade过渡动画效果示例

<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>