Question

我将一个关键帧动画“附加”到我的鼠标指针。理想情况下，当用户空闲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好的，我尝试将动画添加到脉冲类中，并且：

＆＃13;

	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
			});
		});
	
});

＆＃13;

	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;}
}

＆＃13;

<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>

＆＃13;

现在整个事情发生了变化。如何使内圆保持相同的尺寸？我已经为此工作了几天。我对CSS和jQuery都很陌生，所以请耐心等待我。

我认为将它们分成不同的类然后附加它们会调整它们的动作，同时保持它们的规格分离，但它似乎已将.cursor类混合到.pulse类中。

用户空闲时指针类冻结

2 个答案: