jQuery将div动画到每个角，以跳跃动画和'fixed‘元素结束
提问于 2011-01-25 00:13:24
链接：http://jsfiddle.net/kbJCc/1/
不幸的是，我现在甚至不能用jquery执行最简单的动画。我有一个被分成4个按钮的二次型div。每个按钮代表我屏幕的一个角落。因此，如果我按btn1，我的二次div应该动画到左上角。btn2应该为右上角的div设置动画。btn3左下角a.s.o.
现在有两个问题: 1.动画在safari和chrome中不平滑(它从一个角落跳到另一个角落) 2.如果我点击了全部(在前一个动画之后)，div卡在左上角。
Firebug告诉我，我的div保存了$.animate()应用的所有css规则？！
希望外面有人能帮我。
非常感谢。
顺便说一句。div最初应该在我的窗口上居中:)
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-01-25 00:51:50
我已经更新了your jsfiddle。基本上，我给出了包含main-menu静态维度的元素，这样JavaScript就有了计算位置的依据。然后，一旦DOM准备就绪，我就通过JavaScript将main-menu元素初始化为文档的“中心”(从技术上讲，这可以而且应该在样式表中完成)。最后，我更新了动画，显式地动画了main-menu元素的所有方面。
Stack Overflow用户
发布于 2011-01-25 00:19:26
问题是animate会平滑地将css属性从其当前值转换为您指定的值。由于bottom不是初始设置，例如，单击左下角按钮会将bottom从0动画化为10px，而不是top动画。
要解决此问题，您可以只处理top和left的动画。另一种选择是在开始动画之前初始化CSS属性。
Stack Overflow用户
发布于 2020-08-12 09:19:34
一种非常简单的方法
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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4788708
复制
腾讯云开发者
