Question

当用户点击div上的任意位置时，我添加了涟漪效果。它的效果很好，除了当页面全屏时，元素抖动并且模糊不清直到波纹消失。

以下是JS的效果：

$("div").click(function(e) {
  // Remove any old ripples
  $(".ripple").remove();

  // Setup
  var posX = $(this).offset().left,
      posY = $(this).offset().top,
      buttonWidth = $(this).width(),
      buttonHeight = $(this).height();

  // Add the element
  $(this).prepend("<span class='ripple'></span>");

 // Make it round
  if(buttonWidth >= buttonHeight) {
    buttonHeight = buttonWidth;
  } else {
    buttonWidth = buttonHeight; 
  }

  // Get the center of the element
  var x = e.pageX - posX - buttonWidth / 2;
  var y = e.pageY - posY - buttonHeight / 2;


  // Add the ripples CSS and start the animation
  $(".ripple").css({
    width: buttonWidth,
    height: buttonHeight,
    top: y + 'px',
    left: x + 'px'
  }).addClass("rippleEffect");
});

和CSS：

.ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(249, 107, 107, 0.8);
  transform: scale(0);
  position: absolute;
  opacity: 1;
  z-index: 100; 
}
.rippleEffect {
    animation: rippleDrop .4s linear;
}

@keyframes rippleDrop {
  100% {
    transform: scale(0.1);
    opacity: 0;
  }
}

Here's小提琴，但你无法看到问题，因为它是一个最小化的预览，所以here's另一个链接，你可以看到它。

感谢您的帮助！

Answer 1

更改您的代码 FIRST：

<div style="visibility: visible; position: fixed;" id="choose" class="centered">
            <div style="position: fixed; transform: translate(-50%, -50%); width: 100%; left: 50%; top: 50%;" id="choose-cont">
            <h3>You are X, the computer is O.</h3>
            <button id="okay">OK</button>
            <button id="surprise">No</button>
            </div>
   </div>

2

<div style="position: fixed; transform: translate(-50%, -50%); width:   100%; left: 50%; top: 50%;" id="choose-cont">
            <h3>You are X, the computer is O.</h3>
            <button id="okay">OK</button>
            <button id="surprise">No</button>
            </div>

您也可以在CSS中添加它，只需粘贴给您即可看到cahanges！

注意 - 您需要查找YQ代码，我可以覆盖圆圈图片：known bounds on the error of the trapezoidal formula

Answer 2

问题在于这个课程：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

取消它，你不会有闪烁。我猜这个问题与transform属性有关。您可以在DOM中插入和删除项目，并且必须重新计算位置。

当我清除课堂上的所有风格时，闪烁消失了： Fiddle

页面元素因CSS效果而抖动

2 个答案: