這是我第一次使用 Vue.js，我需要在組件第一次加載時做一個非常簡單的影片。
這是我的出發點：
<template>
<div id="app">
<div class="rect" />
</div>
</template>
<script>
export default {
name: "App",
components: {},
};
</script>
<style lang="scss">
#app {
border: 2px solid black;
width: 200px;
height: 300px;
}
#app:hover {
.rect {
background-color: tomato;
height: 0%;
}
}
.rect {
transition: all 1s ease;
background-color: tomato;
width: 100%;
height: 100%;
}
</style>
現在，我希望在第一次加載時，紅色矩形的高度在 2 秒內從 0% 變為 100%，然后它的行為應該像現在這樣，滑鼠懸停時高度變為 0，滑鼠移出 100%。為此，我創建了一個isFirstLoad變數，然后在兩個新類height-0和height-100.
這里的代碼：
<template>
<div id="app">
<div class="rect" :class="{ 'height-100': isFirstLoad }" />
</div>
</template>
<script>
export default {
name: "App",
components: {},
data: function () {
return {
isFirstLoad: true,
};
},
mounted() {
setTimeout(() => {
this.isFirstLoad = false;
}, 2000);
},
};
</script>
<style lang="scss">
#app {
border: 2px solid black;
width: 200px;
height: 300px;
.height-0 {
height: 0%;
}
.height-100 {
height: 100%;
}
}
#app:hover {
.rect {
background-color: tomato;
height: 0%;
}
}
.rect {
transition: all 1s ease;
background-color: tomato;
width: 100%;
// height: 100%;
}
</style>
它適用于第一次加載，但隨后的矩形高度始終為 0%。我想是因為我height-0總是設定。我該如何解決？
uj5u.com熱心網友回復：
嘗試如下代碼片段：
new Vue({
el: '#app',
data() {
return {
isFirstLoad: true,
}
},
methods: {
setHeight(toggle) {
this.isFirstLoad = toggle;
}
},
mounted() {
setTimeout(() => {
this.isFirstLoad = false;
}, 2000);
}
})
Vue.config.productionTip = false
Vue.config.devtools = false#app {
border: 2px solid black;
width: 200px;
height: 300px;
}
#app .height-0 {
height: 0%;
}
#app .height-100 {
height: 100%;
}
#app:hover .rect {
background-color: tomato;
}
.rect {
transition: all 1s ease;
background-color: tomato;
width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"
@mouseover="setHeight(true)"
@mouseleave="setHeight(false)">
<div class="rect" :class="isFirstLoad ? 'height-100' : 'height-0'">
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/359617.html
標籤：javascript css Vue.js css-transitions
上一篇：如何使用查詢定義到外部鏈接的路由