Tag: css transitions

非常简单的JavaScript / jQuery示例：意外的评估指令顺序: 我很惊讶在基于jQuery的CSS属性更改后通过jQuery应用的CSS3转换规则实际上动画了此属性更改。请看http://jsfiddle.net/zwatf/3/ ：最初，div由两个类设置样式，并且由于这两个类的默认CSS属性而具有一定的高度（200px）。然后通过删除一个类，使用jQuery修改高度： $(‘.container’).removeClass(‘active’); 这将高度从200px降低到15px。之后，通过添加类将转换规则应用于容器： $(‘.container’).addClass(‘all-transition’); 发生的事情是高度的降低变得生动（至少在Firefox和Chrome上）。在我的世界中，如果指令的顺序有任何意义，这不应该发生。我想这个行为可以很好地解释。为什么会这样？我该怎样预防呢？这就是我想要实现的目标：使用jQuery修改默认样式（不是通过CSS3过渡动画！）使用jQuery应用转换规则使用jQuery更改属性（通过CSS3过渡动画）（1）和（2）应该尽快发生，所以我不喜欢任意延迟。

想要在旋转时显示元素的厚度: 我正在通过CSS将硬币沿Y轴旋转90度。有没有办法让我可以在旋转之后显示硬币的厚度，我想我可以在硬币沿Y轴旋转后缩放，但这似乎不起作用。如果可能，请建议一些方法来做同样的事情。 link_on_js也是如此。请使用webkit浏览器打开链接。 CSS .coin { display: block; background: url(“url-to-image-of-coin.jpg”); background-size: 100% 100%; width: 100px; height: 100px; margin: auto; border-radius: 100%; transition: all 500ms linear; } .flip { transform: rotateY(180deg); } HTML jQuery的 $(‘.coin’).click(function() { $(this).toggleClass(‘flip’); }); 小提琴 http://jsfiddle.net/7EtLu/22/

使用jQuery的CSS3转换事件监听器: 我正在对article元素实现CSS3过渡效果，但事件监听器transitionend仅适用于纯JavaScript，而不适用于jQuery。见下面的例子： // this works this.parentNode.addEventListener( ‘transitionend’, function() {alert(“1”); }, true); // this does not work $(this).parent().addEventListener( ‘transitionend’, function() {alert(“1”); }, true); 有人可以解释一下我做错了什么吗？

jQuery .css（）中的CSS3转换: 当我将转换行添加到我的代码中时，它会破坏jQuery。我该如何解决？ a(this).next().css({ left: c, transition: ‘opacity 1s ease-in-out’ }); 我正试图在滑块内设置从一个div到下一个div的淡入淡出

CSS转换不会被解雇: 我正在创建一个DOM元素（div），将其添加到DOM中，然后在javascript中快速更改其宽度。这在理论上应该触发CSS3过渡，但结果直接从A到B，没有两者之间的过渡。如果我通过单独的测试点击事件更改宽度，一切都按预期工作。这是我的JS和CSS： JS（jQuery）： var div = $(”).addClass(‘trans’).css(‘width’, ’20px’); $(‘#container’).append(div); div.css(‘width’, ‘200px’); CSS（只需mozilla）： .trans { -moz-transition-property: all; -moz-transition-duration: 5s; height: 20px; background-color: cyan; } 我在这里弄乱了，还是“一气呵成”并不是应该做的事情？所有帮助都非常感谢。