时间戳

首页 > 解决方案 > 如何使用 Vue Js 为 Web 应用程序创建屏幕保护程序？

vue.js - 如何使用 Vue Js 为 Web 应用程序创建屏幕保护程序？

问题描述

我想为我的网络应用程序创建一个屏幕保护程序。我可以像这样用 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 创建屏幕保护程序。

标签： vue.jstimeoutsettimeoutscreensaver

解决方案

只需使用一些 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

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

推荐阅读