用户空闲时指针类冻结

Question

我在鼠标指针上“附加”了一个关键帧动画。理想情况下，当用户闲置 2 秒时，鼠标周围会出现一个脉冲，然后在用户激活时消失。我正在切换“脉冲”类的可见性。有两个问题：

1. 关键帧动画不再附加到鼠标移动
2. 当用户空闲时，动画将出现在脉搏的任何阶段。它可能非常小且微弱或厚实且不透明，但在用户再次移动之前，环将保持静止：

var TimeoutID;

	function inputdetect() {
		// attaches event handler to specified event
		// takes event as string, function to run, and optional boolean
		// to indicate when the event propogates
		// these are false, so events "bubble up"
		this.addEventListener("mousemove",resetTimer,false);
		this.addEventListener("mousedown",resetTimer,false);
		this.addEventListener("mousewheel",resetTimer,false);
		this.addEventListener("keypress",resetTimer,false);
		this.addEventListener("touchmove",resetTimer,false);
		this.addEventListener("DOMmousescroll",resetTimer,false);
		this.addEventListener("MSpointermove",resetTimer,false);

		startTimer();
	}

	inputdetect();

	function startTimer() {
		//waits two seconds before calling inactive
		TimeoutID = window.setTimeout(goInactive,2000); // does it need to take the window variable??

	}

	function resetTimer(e) {
		window.clearTimeout(TimeoutID);
		goActive();

	}

	function goActive() {

		//what happens when the UI is not idle

		$('p').text("The UI is not idle.");
		$('.cursory').css("background-color","green");

		$('.pulse').css('visibility','hidden');
		startTimer();
	}

	function goInactive() {
		
		$('p').text("The UI is idle.");
		// REPLACING CURSOR WHEN UI IS IDLE
		//this part won't work
		$('.cursory').css("background-color","red");
		$('.pulse').css('visibility','visible');
		

	}

// THIS changes the pointer to a css element
 $(document).ready(function() { 

    $(document).on('mousemove', function(e) {
			$('.cursory').css({
				left: e.pageX,
				top: e.pageY
			});


		});
	

});

html {
	  cursor: none;
	  
	}
	.cursory {

	  height: 10px;
	  width: 10px;
	  border-radius: 100%;
	   margin: 0px;
   		padding: 5px;
   		
	  background-color: green;
	  background-clip: content-box;

	  position: fixed;
	  
	}

	.pulse {

		border: 3px solid blue;
		-webkit-border-radius:30px;
		height:18px;
		width:18px;
		position: fixed;
		z-index:-1;
   		 left:-7px;
    	top:-7px;
    	-webkit-animation: pulsate 1s ease-out;
    	-webkit-animation-iteration-count: infinite; 
    	opacity: 0.0

	}

	@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <div class = "cursory"><div class = "pulse"></div></div>
<!--this is where the HTML will go*/-->
<p>hello</p>

强调文字

Answer 1

向.pulse 添加另一个类。并将动画附加到该类。当您不想要动画时，只需删除该类。重新应用类动画将从起点开始，因此您不会看到任何不一致。 另外，为了确定你给visibility: hidden; 到.pulse 的动画。但是在你的附加课程中给出visibility: visible;，并像.pulse.additionalClass一样提及你的附加课程。它将覆盖您的.pulse 的visibility: hidden

Answer 2

@shishir-trivedi 好的，我尝试将动画添加到脉冲类并且：

	var TimeoutID;

	function inputdetect() {
		// attaches event handler to specified event
		// takes event as string, function to run, and optional boolean
		// to indicate when the event propogates
		// these are false, so events "bubble up"
		this.addEventListener("mousemove",resetTimer,false);
		this.addEventListener("mousedown",resetTimer,false);
		this.addEventListener("mousewheel",resetTimer,false);
		this.addEventListener("keypress",resetTimer,false);
		this.addEventListener("touchmove",resetTimer,false);
		this.addEventListener("DOMmousescroll",resetTimer,false);
		this.addEventListener("MSpointermove",resetTimer,false);

		startTimer();
	}

	inputdetect();

	function startTimer() {
		//waits two seconds before calling inactive
		TimeoutID = window.setTimeout(goInactive,2000); // does it need to take the window variable??

	}

	function resetTimer(e) {
		window.clearTimeout(TimeoutID);
		goActive();

	}

	function goActive() {

		//what happens when the UI is not idle

		$('p').text("The UI is not idle.");
		$('.cursory').css("background-color","green");
		$('.cursory').removeClass("pulse");
		startTimer();
	}

	function goInactive() {
		
		$('p').text("The UI is idle.");
		// REPLACING CURSOR WHEN UI IS IDLE
		//this part won't work
		$('.cursory').css("background-color","red");
		$('.cursory').addClass("pulse");
		

	}

// THIS changes the pointer to a css element
 $(document).ready(function() { 

    $(document).on('mousemove', function(e) {
		$('.cursory').css({
			left: e.pageX,
			top: e.pageY
			});
		});
	
});

	html {
	  cursor: none;
	  
	}
	.cursory {

	  height: 10px;
	  width: 10px;
	  border-radius: 100%;
	   margin: 0px;
   		padding: 5px;
   		
	  background-color: green;
	  background-clip: content-box;

	  position: fixed;
	  
	}

	.pulse {

		border: 3px solid blue;
		-webkit-border-radius:30px;
		height:18px;
		width:18px;
		/*position: fixed;*/
		z-index:-1;
   		 left:-7px;
    	top:-7px;
    	-webkit-animation: pulsate 1s ease-out;
    	-webkit-animation-iteration-count: infinite; 
    	opacity: 0.0

	}

	@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class = "cursory"></div>
<!--this is where the HTML will go*/-->
<p>hello</p>

现在整个事情都在脉动。如何使内圈保持相同大小？我已经为此工作了几天。我对 CSS 和 jQuery 都很陌生，所以请耐心等待。

我认为将它们分成单独的类，然后附加它们会调整它们的行为，同时保持它们的规格分开，但它似乎已经将 .cursor 类混入了 .pulse 类。