原生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: 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>
效果
动态图:
演示
http://demo.likeyunba.com/spa-transition/
本文作者
TANKING
THE END