极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>竖屏滚动</title>
<style>
#slideY {
position: absolute;
width: 100%;
height: 100%;
}
#slideY>div {
width: 100%;
height: 100%;
}
button {
position: fixed;
display: block;
width: 100px;
height: 35px;
line-height: 35px;
text-align: center;
bottom: 20px;
left: 50%;
margin-left: -50px;
}
.page1 {
background: #333333;
}
.page2 {
background: #0DDFBA;
}
.page3 {
background: #8FC62D;
}
.page4 {
background: #C69B6E
}
.translate-enter-active,
.translate-leave-active {
transition: all 1s;
animation-duration: 1s;
animation-fill-mode: both;
}
.translate-enter {
animation-name: in;
}
.translate-enter-active{
animation-name: in;
}
.translate-leave-active {
animation-name: out;
}
@keyframes out {
from {
transform: translate3d(0, 0, 0);
}
0 {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -100%, 0);
}
}
@keyframes in {
from {
transform: translate3d(0, 100%, 0);
}
0 {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0%, 0);
}
}
</style>
</head>
<body>
<div id="slideY">
<transition name="translate">
<div v-if="page == 0" key="page1" class="page1">1</div>
<div v-if="page == 1" key="page2" class="page2">2</div>
<div v-if="page == 2" key="page3" class="page3">3</div>
<div v-if="page == 3" key="page4" class="page4">4</div>
</transition>
<button @click="change()">下一页</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
var vm = new Vue({
el: '#slideY',
data: {
page: 0,
},
methods: {
change: function() {
if(vm.page < 3) {
vm.page += 1;
} else if(vm.page = 3) {
vm.page = 0;
}
},
}
})
</script>
</body>
</html>现在的问题是页面间切换时，translate-enter-active这个类的效果并没有出现，只能看到translate-leave-active 这个类的效果，即只能看到离开页面的上滑，而进入页面的上滑看不到。控制台上，translate-enter-active类却有样式，这是为什么？