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

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

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

Vue過渡動畫

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