CSS3关于动画的问题,动画停止后让他的display等于none,再让他等于bl...

发布网友发布时间：2022-04-25 18:34

共2个回答

懂视网时间：2022-05-12 23:35

我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢？

CSS3动画也是可以做回调处理的，这里分为两个属性，一个是transition[w3c文档]，另外一个是animation[w3c文档]。

1、transition

对于transition，可以监听transitionend事件，当动画完成时触发，可以这样使用：



 
 css3-transitionend - BeyondWeb

2、animation

对于animation我们可以监听animationend事件，示例代码如下：



 
 css3-animationend - BeyondWeb

热心网友时间：2022-05-12 20:43

jQuery的可以实现：
1.fadeIn（速度，[回调]）通过改变所有匹配元素的不透明度来实现淡入效果，并在动画可选地触发一个回调函数后完成。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。

参数速度（字符串，数字）：三种预定速度字符串（“慢”，“正常”或“快速”）长的毫秒数值（如：1000）的一个表示动画或

回调（功能）：（可选）（可选）例如600毫秒缓慢淡入一段

代码：$（“P”）淡入（“慢“）;

用200毫秒快速褪色的段落，然后会弹出一个对话框jQuery代码：。“动画完成”$（“P”）淡入（“快”，函数（）{

警报（）;

}）;

2.fadeOut（速度，[回调]）通过改变不透明度来实现所有匹配淡入淡出效果的元素，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。

参数速度（字符串，数字）：三种预定速度字符串（“慢”，“正常”或“快速”）长的毫秒数值（如：1000）的一个表示动画或

回调（功能）：（可选）功能例如与段落600毫秒缓慢褪色

代码：$（“P”）。淡出（“慢”）;

200毫秒段对话

代码后迅速褪色。 $（“P”）淡出（“快”，函数（）{

警报（“动画完成。”）;

}）;

3.fadeTo（速度，透明度，[回调]），所有匹配的元素逐步调整到指定的不透明度，并可选地触发一个回调函数完成动画后的不透明度。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。

参数速度（字符串，数字）：表示动画或

不透明度（：三种预定速度弦长的毫秒值（1000例）（“慢”，“正常”或“快速”）之一号）：调整0和1）的回调（功能）之间的不透明度值（数。（可选）功能 600毫秒，以缓慢调整到0.66段，能见度的透明度有关的

码2/3。 $（“p”）的fadeTo（“慢”，0.66）; $（“P”）。fadeTo（“慢”，0.66）;

同款200毫秒快速调整到0.25，能见度约1/4的透明度，然后会弹出一个对话框jQuery代码：$（“P”）。 fadeTo（“快”，0.25，函数（）{

警报（）“动画完成。”;
}）;追问我这里是CSS3的知识和应用，这里是CSS3动画中的一个问题，fadeIn这几个函数是淡入淡出，我知道。我要的是我这个的解决办法，或者问题所在。这个问题是我应用CSS3中的transform和animation配合时出现的问题。希望能给我解答