快捷導(dǎo)航

原生JS實(shí)現(xiàn)Vue transition fade過渡動(dòng)畫效果示例

更新時(shí)間：2023年06月16日 15:36:56 作者：TANKING

這篇文章主要為大家介紹了原生JS實(shí)現(xiàn)Vue transition fade過渡動(dòng)畫效果示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Vue過渡動(dòng)畫

Vue有一個(gè)過渡動(dòng)畫，很多網(wǎng)頁(yè)都在用，主要是體驗(yàn)還不錯(cuò)，所以很多使用Vue構(gòu)建的頁(yè)面如果考慮使用動(dòng)畫，基本就會(huì)使用這個(gè)fade動(dòng)畫，我現(xiàn)在使用原生的JavaScript來(lái)實(shí)現(xiàn)。

代碼

<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': '請(qǐng)注意，上述示例中的動(dòng)畫效果是通過CSS的動(dòng)畫來(lái)實(shí)現(xiàn)的，而不是使用原生JavaScript逐幀處理動(dòng)畫。這種方式可以更方便地使用CSS來(lái)定義和管理動(dòng)畫效果，但具體的實(shí)現(xiàn)方式會(huì)根據(jù)你的需求和設(shè)計(jì)來(lái)定制。你可以根據(jù)需要進(jìn)行調(diào)整和擴(kuò)展，以滿足你的具體需求。'},
  {'Page2': '在上面的示例中，我們添加了一個(gè)名為fade的CSS類，用于應(yīng)用淡入淡出的動(dòng)畫效果。使用animation屬性指定了名為fadeAnimation的動(dòng)畫，并設(shè)置了持續(xù)時(shí)間為0.5秒。@keyframes規(guī)則定義了fadeAnimation動(dòng)畫的關(guān)鍵幀。在0%時(shí)，頁(yè)面內(nèi)容元素的透明度為0，向下移動(dòng)50%；在100%時(shí)，透明度為1，不再進(jìn)行垂直位移。這樣就實(shí)現(xiàn)了從下往上的淡入效果。'},
  {'Page3': 'avaScript部分的changePage函數(shù)接收一個(gè)頁(yè)面索引作為參數(shù)，根據(jù)索引從pageData數(shù)組中獲取相應(yīng)的頁(yè)面數(shù)據(jù)。然后，我們通過操作page-content元素的textContent屬性，將頁(yè)面內(nèi)容更新為對(duì)應(yīng)頁(yè)面的值。'}
];
window.onload=function(){
    // 進(jìn)入頁(yè)面加載
    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>