css3 slide动画,css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work)

css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work)

飞机动画块(他从一边到另一边飞行 - 永远)。

可以使用jquery折叠和扩展块容器：

onclick = "$('.wrap').slideToggle('normal'); return false;"

因此，如果您折叠并展开块，动画将停止，我该如何解决？

The airplane animation block (he flies from side to side - forever).

Block container can be collapsed and expanded using jquery:

onclick = "$('.wrap').slideToggle('normal'); return false;"

So, if you collapse and expand the block, the animation stops, how can I fix it?

原文：https://stackoverflow.com/questions/21537340

更新时间：2020-02-12 20:06

最满意答案

按下.knopka后，我认为你需要调用go(); 再次：

zminu HTML

button minimize/maximize

我jQuery

$('.knopka').on('click', function () {

$('.wrap').slideToggle('normal', function () {

// This is a callback function

// put code here that you need to execute after sliding is finished

go();

});

return false;

});

它并不完美，但我认为你会得到这个想法。

After the .knopka is pressed I think you need to call go(); again:

zminu HTML

button minimize/maximize

i jQuery

$('.knopka').on('click', function () {

$('.wrap').slideToggle('normal', function () {

// This is a callback function

// put code here that you need to execute after sliding is finished

go();

});

return false;

});

It's not perfect but I think you will get the idea.

相关问答

来自MDN - @keyframes 当属性遗留在某些关键帧之外时 您未在每个关键帧中指定的任何属性都会进行插值 并且看起来值是使用animation-timing-function在当前到下一个给定值的中间插值，这在您的情况下很ease 。 例如，当您将计时功能更改为linear ，您将得到一条直线 #ball {

animation-timing-function: linear;

}

见修改后的JSFiddle From MDN - @keyframes When properti

...

你忘了添加keyframes img {

text-align: center;

width: 20px;

margin: auto;

display: block;

-webkit-animation: rotateSpinner 1.2s linear infinite;

animation: rotateSpinner 1.2s linear infinite;

}

@-webkit-keyframes rotateSpinner {

to {

...

你的代码看起来不错。 您可以运行以下代码以查看它是否正常工作： fade-in {

opacity:0;

-webkit-animation:fadeIn ease-in 1;

-moz-animation:fadeIn ease-in 1;

animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards;

-moz-animation-fill-mode:for

...

$(document).ready(function () {

$('.click_to_hide').click(function () {

var visible = $('.hide_on_click').is(":visible");

$('.hide_on_click').slideToggle(500);

if (!visible) {

$('html, body').animate({

...

不幸的是，IE目前不支持SVG的CSS动画。 Unfortunately, IE currently doesn't support CSS animations of SVG.

顺序不正确，您需要在animation-delay后面放置animation-delay ，这是速记属性，因此它会重置延迟计时器。 animation速记的顺序如下... 在每个动画定义中，顺序非常重要：可以将解析为的第一个值分配给animation-delay animation-duration ，将第二个值分配给animation-delay 。 积分： Mozilla开发者网络 因此，您正在定义animation-delay属性后， animation将延迟重置为0 演示 (不

...

IE9或更低版本不支持动画，转换和转换。 IE 10+支持它们，但即使在这种情况下，用户在使用IE时也会遇到很多问题。 最好的办法是使用javascript。 使用javascript，你可以避免CSS3 animations ，甚至在IE中运行你的结果更好。 有关animations, transitions and transformations浏览器兼容性animations, transitions and transformations查看以下链接： https ： //develope

...

按下.knopka后，我认为你需要调用go(); 再次： zminu HTML

button minimize/maximize

我jQuery $('.knopka').on('click', function () {

$('.wrap').slideToggle('normal', function () {

// This is a callback function

// put code h

...

是的，有办法绕过它。 您可以通过键入不带空格的元素来删除使用inline-block获得的空间。 像这样的东西：

• 
• 
• 
•