jQuery动画div到每个角落以跳跃动画和“固定”元素结束答案

【问题标题】：jQuery animating div to each corner ends in jumpy animation and 'fixed' elementjQuery动画div到每个角落以跳跃动画和“固定”元素结束
【发布时间】：2011-06-14 21:26:59
【问题描述】：

链接：http://jsfiddle.net/kbJCc/1/

不幸的是，我现在什至无法使用 jquery 执行最简单的动画。我有一个用 4 个按钮分隔的二次 div。每个按钮代表我屏幕的一个角落。所以如果我按 btn1 我的 quadrativ div 应该动画到左上角。 btn2 应该将 div 设置为右上角的动画。 btn3 左下 a.s.o.

现在有两个问题： 1. safari & chrome 中的动画不流畅（从一个角跳到另一个角） 2.如果我点击了所有（上一个动画之后的一个），div卡在左上角。

Firebug 告诉我，我的 div 保留了 $.animate() 应用的所有 css 规则？！

希望这里有人可以帮助我。

非常感谢。

顺便说一句。 div 最初应该以我的窗口为中心:)

【问题讨论】：

标签： jquery css animation

【解决方案1】：

问题在于animate 将 css 属性从其当前值平滑地转换为您指定的值。例如，由于最初未设置 bottom，因此单击左下角的按钮会将 bottom 从 0 动画化到 10px，而不是动画化 top。

要解决这个问题，您可以只处理动画top 和left。另一种选择是在开始动画之前初始化 CSS 属性。

【讨论】：

【解决方案2】：

我已更新your jsfiddle。基本上，我给了包含main-menu 静态尺寸的元素，以便JavaScript 可以从中计算位置。然后，一旦 DOM 准备就绪，我就通过 JavaScript 将 main-menu 元素初始化为文档的“中心”（从技术上讲，这可以而且应该在样式表中完成）。最后，我更新了您的动画以明确地为 main-menu 元素的所有面设置动画。

【讨论】：

感谢您的帮助和更新我的代码。像魅力一样工作:)

【解决方案3】：

非常简单的方法

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [startAnimate, setStartAnimate] = useState(false);
  const animate = () => {

    setStartAnimate(!startAnimate);
  };
  return (
    <div className="App">
      <div class={`logo ${startAnimate && "animate"}`}></div>
      <button onClick={animate}>click</button>
    </div>
  );
}

css

}
.logo {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 20%;
  left: 50%;
  right: 0;
  background-color: red;
  transition: all 1s;
}
.logo.animate {
  left: 0;
  top: 0;
  transform: scaleY(0.5);
}

sandbox

【讨论】：