指针 Class 在用户空闲时冻结

Question

我"attached"我的鼠标指针的关键帧动画。理想情况下，当用户闲置 2 秒时，鼠标周围应出现一个脉冲，然后在他们开始活动时消失。我正在切换 "pulse" class 的可见性。有两个问题：

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

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

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

Answer 2

@shishir-trivedi 好的，我尝试将动画添加到脉冲 class 和：

 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 都很陌生，所以请耐心等待。

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

指针 Class 在用户空闲时冻结

Pointer Class Freezes when User is Idle

javascript

jquery

css

animation

mouse