Question

大家好，我需要有关动画的帮助，我创建了一个在循环中向左和向右移动的按钮，并且鼠标从按钮上移出时遇到问题。将鼠标移出后，它不平滑，它会跳到起始位置。

private static List<Integer> joinTwoLists(List<Integer> a, List<Integer> b) {
    final boolean aIsBigger = a.size() > b.size();
    final List<Integer> joined = new ArrayList<>(aIsBigger ? a : b);
    final AtomicInteger index = new AtomicInteger(1);
    for (Integer value : aIsBigger ? b : a) {
        joined.add(index.getAndAdd(2), value);
    }
    return joined;
}

.hover {
  padding: 20px 30px;
  font-size: 20px;
  font-weight: 500;
  background: rgba(33, 150, 243, 1);
  transition: all .6s linear;
  color: #fff;
  margin: 50px;
  border: none;
}

.hover:hover {
  animation: pulse .6s infinite alternate;
  transition: all .6s linear;
}

@keyframes pulse {
  0% {
    transform: translate(0px)
  }
  100% {
    transform: translate(10px)
  }
}

有什么主意我在这里做错什么吗？

谢谢：）

Answer 1

如果可以接受Javascript解决方案，则可以使用Web Animations代替CSS动画。
对于某些浏览器，您可能需要Polyfill。

var btn = document.querySelector("button");

var a = btn.animate(
  [
    {transform: 'translateX(0px)'},
    {transform: 'translateX(10px)'},
    {transform: 'translateX(0px)'}
  ],
  1200
);

a.pause();

btn.addEventListener('mouseover', () => {
  btn.classList.add('hover');
  a.play();
});

btn.addEventListener('mouseout', () => btn.classList.remove('hover'));

a.addEventListener(
  'finish',
  () => {
    if (btn.classList.contains('hover'))
      a.play();
  }
);

button {
  margin: 50px;
  padding: 20px 30px;
  border: none;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  background: rgba(33, 150, 243, 1);
}

<!-- Polyfill -->
<script src="https://web-animations.github.io/web-animations-demos/components/web-animations-js/web-animations.min.js"></script>

<button>Move Right And left</button>

CSS动画-滑鼠滑出

1 个答案: