如何使用Vue Js为网络应用程序创建ScreenSaver？

Question

我想为我的网络应用程序创建一个屏幕保护程序。我可以像这样用Jquery创建它！

JQUERY

var mousetimeout;
var screensaver_active = false;
var idletime = 5;

function show_screensaver(){
    $('#screensaver').fadeIn();
    screensaver_active = true;
    screensaver_animation();
}

function stop_screensaver(){
    $('#screensaver').fadeOut();
    screensaver_active = false;
}

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

$(document).mousemove(function(){
    clearTimeout(mousetimeout);

    if (screensaver_active) {
        stop_screensaver();
    }

    mousetimeout = setTimeout(function(){
        show_screensaver();
    }, 1000 * idletime); // 5 secs          
});

function screensaver_animation(){
    if (screensaver_active) {
        $('#screensaver').animate(
            {backgroundColor: getRandomColor()},
            400,
            screensaver_animation);
    }
}

点击观看完整代码和演示

手表演示

但我想将JQuery代码转换为Vue Js。也许有人能帮我用vue js创建屏幕保护程序。

Answer 1

只需使用一些CSS动画，您可以节省大量的性能和摆脱大量的代码。

这里我有一个简单的密码给你。

animation: color-transition 3s linear infinite alternate;

@keyframes color-transition {
    0% {
        background-color: #4C6085;
        border-color: #4C6085;
    }
    33% {
        background-color: #80D39B;
        border-color: #80D39B;
    }
    66% {
        background-color: #BE3E82;
        border-color: #BE3E82;
    }
    100% {
        background-color: #4C6085;
        border-color: #4C6085;
    }
}

https://codepen.io/sontd/pen/MWgPYom

添加更多不同颜色的关键帧，以获得更多的过渡，不要忘记增加过渡时间也。