原生JavaScript实现Vue transition fade过渡动画效果

2023-06-2507:56:57WEB前端开发Comments741 views字数 2057阅读模式

Vue有一个过渡动画，很多网页都在用，主要是体验还不错，所以很多使用Vue构建的页面如果考虑使用动画，基本就会使用这个fade动画，我现在使用原生的JavaScript来实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/48148.html

代码

代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/48148.html

<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: 10px;
}

#page-content{
    width: 550px;
    height: 600px;
    float: right
}

</style>

<script type="text/javascript">

var pageData = [
  {'Page1': '在完成了无数任务，克服了各种不可能的困难之后，唐老大（范·迪塞尔 Vin Diesel 饰）和他的家族以智慧、勇气和速度过五关斩六将，打败了一路上的所有敌人。如今，他们面对的是一名危险至极的对手：这个从过往阴影中浮出水面的具有致命威胁的人物，誓要报偿血海深仇，决心破坏这个家族，彻底摧毁唐老大所热爱的一切及其至亲至爱之人。'},
  {'Page2': '《流浪地球2》是由郭帆执导，吴京、李雪健、沙溢、宁理、王智、朱颜曼滋领衔主演、刘德华特别演出的科幻灾难电影。该片于2023年1月22日在中国大陆及北美地区同步上映；2023年2月9日在中国港澳地区上映。该片以提出计划将建造1万座行星发动机的时代为故事背景，讲述了“太阳危机”即将来袭，世界陷入一片恐慌之中，万座行星发动机正在建造中，人类将面临末日灾难与生命存续的双重挑战故事。'},
  {'Page3': '银河护卫队3》是漫威影业出品、华特·迪士尼电影公司发行的科幻动作冒险电影，由克里斯·帕拉特、佐伊·索尔达娜、布莱德利·库珀、戴夫·巴蒂斯塔、范·迪塞尔主演 [4] ，于2023年5月5日在北美地区及中国内地同步上映 [14] 。该片是《银河护卫队》电影系列的完结篇，讲述“星爵”集结团队，为营救身负重伤的队友火箭浣熊而进行一项危险任务的故事。'}
];

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)">速度与激情10</button>
        <button onclick="changePage(1)">流浪地球2</button>
        <button onclick="changePage(2)">银河护卫队3</button>
    </div>

    <div id="page-content" class="fade"></div>
</div>