vue.js做竖屏滚动遇到的问题

<!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类却有样式,这是为什么?

阅读 2.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题