有没有更好的方法实现？
<template>

    <div class="app">
        <image ref="bg_img_1" class="bg-img-1" src="https://bbs.eeui.app/assets/files/2022-03-23/1648046430-795537-login-bg2.jpeg"></image>
        <image ref="bg_img_2" class="bg-img-2" src="https://bbs.eeui.app/assets/files/2022-03-23/1648046430-795537-login-bg2.jpeg"></image>
        <div class="backdrop"></div>
    </div>

</template>

<style scoped>
    .app {
        flex: 1;
    }
    .backdrop{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0,0,0,0.4);
    }
    .bg-img-1 {
        position: absolute;
        width: 750px;
        height: 2934px;
        top: 0;
        left: 0;
    }
    .bg-img-2{
        position: absolute;
        width: 750px;
        height: 2934px;
        top: 2934px;
        left: 0;
    }

</style>

<script>
const eeui = app.requireModule('eeui');
const animation = app.requireModule('animation');
const imageHeight = 2934;
let count = 0;
export default {
    data() {
        return {

        }
    },
    pageReady: function (data) {
        console.log('页面挂载：页面【渲染完成】时触发');
        this.move1();
    },
    methods: {
        move1() {
            console.log("move1。。。。。。");
            const ref1 = this.$refs.bg_img_1;
            const ref2 = this.$refs.bg_img_2;
            const self = this;
            animation.transition(ref1, {
                styles: {
                    transform: 'translateY(-' + imageHeight +'px)',
                },
                duration: imageHeight * 10, //ms
                delay: 0 //ms
            }, function () {
            })
            animation.transition(ref2, {
                styles: {
                    transform: 'translateY(-' + imageHeight +'px)',
                },
                duration: imageHeight * 10, //ms
                delay: 0 //ms
            }, function () {
                ref2.style.top = "0px";
                ref1.style.top = imageHeight + "px";
                self.move2();
            })
        },
        move2() {
            console.log("move2。。。。。。");
            const ref1 = this.$refs.bg_img_1;
            const ref2 = this.$refs.bg_img_2;
            const self = this;
            animation.transition(ref1, {
                styles: {
                    transform: 'translateY(0px)',
                },
                duration: 0, //ms
                delay: 0 //ms
            }, function () {
                animation.transition(ref1, {
                    styles: {
                        transform: 'translateY(-'+imageHeight+'px)',
                    },
                    duration: imageHeight * 10, //ms
                    delay: 0 //ms
                }, function () {

                })
            })
            animation.transition(ref2, {
                styles: {
                    transform: 'translateY(0px)',
                },
                duration: 0, //ms
                delay: 0 //ms
            }, function () {
                animation.transition(ref2, {
                    styles: {
                        transform: 'translateY(-'+imageHeight+'px)',
                    },
                    duration: imageHeight * 10, //ms
                    delay: 0 //ms
                }, function () {
                    ref1.style.top = "0px";
                    ref2.style.top = imageHeight + "px";
                    self.move1();
                })
            })
        },
    }
};
</script>