Vue js爲路線頁面添加元素動畫

我只想在路由頁面加載完成時爲特定元素設置動畫。它沒有路由頁面轉換。我嘗試了很多方法。它是一個進度條，動態地從數據值中動態顯示百分比。我已經嘗試過更改類的掛載銷燬方法，但它不工作。我的要求是我想從數據傳遞值，並根據值，進度條shour動畫時頁面加載。 enter image description here Vue js爲路線頁面添加元素動畫

<div class="media-body"> 
    <div class="progress"> 
      <div class="progress-bar progress-bar-warning" v-bind:class="{rating: isAnimate}"> 
     </div> 
    </div> 
</div>

.mybar { 
 
    height: 5px; 
 
    overflow: hidden; 
 
    background-color: #C1C2C1; 
 
    box-shadow: none; 
 
    } 
 
    .myactivebar { 
 
    background-color: #B01058; 
 
    float: left; 
 
    box-shadow: none; 
 
    transition: width 1s ease; 
 
    height: 100%; 
 
    width: 40%; 
 
} 
 
.rating { 
 
    width:100%; 
 
}

data() { 
 
    return { 
 
     isAnimate: false, 
 
     technologies:[ 
 
     { 
 
      title:'Vue Js', 
 
      info:'progressive framework for building user interfaces.', 
 
      logo:'https://vuejs.org/images/logo.png', 
 
      rate:90 
 
     }, 
 
     ] 
 
    } 
 
    }

來源

2017-07-16 Kushan Shanuka

我認爲你正在尋找這樣的解決方案：https://router.vuejs.org/en/advanced/navigation-guards。 html每個導航都會觸發警衛。你可以使用'.beforeEach'來顯示欄和'.afterEach'來填充它。 – yuriy636

其實，這是我想要的。 enter image description here

，我得到了下面

@-moz-keyframes animate-bar { 
 
    0% { width: 0%; } 
 
} 
 

 
@-webkit-keyframes animate-bar { 
 
    0% { width: 0%; } 
 
} 
 

 
@-ms-keyframes animate-bar { 
 
    0% { width: 0%; } 
 
} 
 

 
@-o-keyframes animate-bar { 
 
    0% { width: 0%; } 
 
} 
 

 
@-keyframes animate-bar { 
 
    0% { width: 0%; } 
 
} 
 

 
.chart { 
 
    background-color: #DADADA; 
 
    height: 2px; 
 
    position: relative; 
 
} 
 

 
.chart .bar { 
 
    background-color: #3D98C6; 
 
    height: 100%; 
 
    -moz-animation: animate-bar 1.25s 1 linear; 
 
    -webkit-animation: animate-bar 1.25s 1 linear; 
 
    -ms-animation: animate-bar 1.25s 1 linear; 
 
    -o-animation: animate-bar 1.25s 1 linear; 
 
    animation: animate-bar 1.25s 1 linear; 
 
}

<div class="chart"> 
 
    <div class="bar" style="width:60%;"></div> 
 
</div>

來源

2017-07-17 09:36:25

Vue js爲路線頁面添加元素動畫

回答

相關問題