Javascript 为什么CSS转换不能与另一个基于jQuery'；什么是动画制作方法？

我有一个按钮，我想移动时，它被点击，而在移动它也应该翻转。因此，有两个动画同时发生，并且持续时间相同。我还为按钮的所有属性设置了CSS

transition

。在我看来，当我同时使用jQuery的

animate

方法和CSS转换效果时，似乎只有CSS缩放转换起作用。当我删除其中一个动画时，另一个效果很好

//查找元素
变量按钮=$（“按钮”）；
//手柄点击
按钮。打开（“单击”，函数（）{
button.css({
“转换”：“scaleX（0）”
});
//错误：以下动画不可见
按钮。动画({
“顶部”：“-100px”//I我也尝试过不使用“px”
}, 0.15 * 1000);
});
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
钮扣{
背景：#0084ff；
边界：无；
边界半径：5px；
填充：8px 14px；
字体大小：15px；
颜色：#fff；
位置：相对位置；
过渡：均为0.15秒；
}

你好，世界

点击我
您的按钮位置应设置为绝对


var按钮=$（“按钮”）；
//手柄点击
按钮。打开（“单击”，函数（）{
button.css({
“转换”：“scaleX（0）”
});
//错误：以下动画不可见
动画（{top:-100px}，0.15*1000）；
});
按钮{
位置：绝对位置；
}

你好，世界

点击我
您的按钮位置应设置为绝对


var按钮=$（“按钮”）；
//手柄点击
按钮。打开（“单击”，函数（）{
button.css({
“转换”：“scaleX（0）”
});
//错误：以下动画不可见
动画（{top:-100px}，0.15*1000）；
});
按钮{
位置：绝对位置；
}

你好，世界

点击我
仅使用
转换中所需的属性，即
转换0.15s
而不是
所有0.15s


//查找元素
变量按钮=$（“按钮”）；
//手柄点击
按钮。打开（“单击”，函数（）{
button.css({
“转换”：“scaleX（0）”
});
//错误：以下动画不可见
按钮。动画({
“顶部”：“-100px”//I我也尝试过不使用“px”
}, 0.15 * 1000);
});
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
钮扣{
背景：#0084ff；
边界：无；
边界半径：5px；
填充：8px 14px；
字体大小：15px；
颜色：#fff；
位置：绝对位置；
转换：转换0.15s；/*在此处更改*/
}

你好，世界

点击我
仅使用
转换中所需的属性，即
转换0.15s
而不是
所有0.15s


//查找元素
变量按钮=$（“按钮”）；
//手柄点击
按钮。打开（“单击”，函数（）{
button.css({
“转换”：“scaleX（0）”
});
//错误：以下动画不可见
按钮。动画({
“顶部”：“-100px”//I我也尝试过不使用“px”
}, 0.15 * 1000);
});
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
钮扣{
背景：#0084ff；
边界：无；
边界半径：5px；
填充：8px 14px；
字体大小：15px；
颜色：#fff；
位置：绝对位置；
转换：转换0.15s；/*在此处更改*/
}

你好，世界

点击我


当您将按钮样式声明为过渡时：所有0.15秒也会影响
top
属性。因此，在您的流程中：

顶部动画确实在css操作后几毫秒发生
顶部动画的每一步都要经过过渡
由于第一个原因，已经存在可能导致顶部动画不被注意的竞速情况，但是由于第二个原因，jQuery动画的每一步都有一个放松

如果未提供，放松功能默认为
swing
，定义为：

 function( p ) {
    return 0.5 - Math.cos( p * Math.PI ) / 2;
 }

其中
p
介于0和1之间

在本例中，您要求jQuery在150ms内将
top
从0更改为-100。通常是动画间隔，但假设正好是15毫秒，因此我们有10个动画步骤。由于
swing
放松，第一步金额为：

 100 * (0.5 -  Math.cos( (0.1 * Math.PI ) / 2) = 2.45

换句话说，由于
转换：所有0.15秒
并将比赛条件分开，单击按钮将水平缩放到0，并在0.15秒内向上移动2.45像素

相反，如果您只转换
transform
属性，并将
top
转换保留到jQuery，则可以看到这两种转换并行进行

在下面的代码片段中，我将事情放慢到1秒，在每个步骤上添加了控制台语句，并包括常规按钮，另一个按钮只转换
transform
，第三个按钮转换
transform
和
top
，它不使用jQuery动画


//查找元素
var button=$（“button.animate”）；
//手柄点击
按钮。打开（“单击”，函数（）{
console.clear（）；
$（this.css）(
“转换”（索引，值）=>{
log（`top:transformwas${value}`）；
返回“scaleX（0）”；
}
);
log（$.fn.animate之前）；
$（此）。设置动画({
“顶部”：“-100px”
}，1000，'摆动'，（）=>{
log（'finishanimation'）；
window.setTimeout（（）=>{
console.log（'还原初始状态'）
$（this.css）({
转换：“取消设置”，
排名：0
});
}, 2000);
});
});
//手柄点击
$（“button.no_animate”）。在（“单击”，函数（）上{
console.clear（）；
$（this.css）({
“转换”：“scaleX（0）”，
“顶部”：“-100px”
});
window.setTimeout（（）=>{
log（“还原所有内容”）；
$（this.css）({
转换：“取消设置”，
排名：0
 100 * (0.5 -  Math.cos( (0.1 * Math.PI ) / 2) = 2.45