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