Tag: css transitions

从DOM中删除兄弟元素时，创建块元素的平滑过渡

我有一个类似于mac os中的通知的容器 – 元素被添加到队列中并在某个超时后被删除。 这很好用，但有一个不和谐的视觉副作用。 当从DOM中删除它们时，对UI进行锯齿状更新，因为堆栈中的下一个元素填充了前一个元素创建的空白。 我希望堆栈中的下面的元素能够顺利地向上移动到那个空间，理想情况下是使用css3，但是添加了一个transition: all 0.5s ease-in-out当删除它的兄弟时，对于.notice类的transition: all 0.5s ease-in-out进入对该对象都没有影响。 最小的JS干涉： $(‘#add’).click(function(e) { e.preventDefault(); $(‘#container’).append(‘Notice #’); }); $(‘body’).on(‘click’,’p.notice’, function(e) { $(this).fadeOut(); }); 更好的是在这里摆弄： http://jsfiddle.net/kMxqj/ 我正在使用MVC框架对这些对象进行数据绑定，因此一些原生css / jQuery比Jq插件更受欢迎。

translate3d（）导致jQueryhover/单击事件无法正确触发

在分析不同CSS动画类型的jQuery鼠标事件时，我注意到translate3d导致hover和其他事件无法正确触发。 在一个基本示例中，我从右到左为动画块列表设置动画。 在翻转时，我将hover的LI背景设置为GREEN。 注意：为webkit构建测试 HTML content content … CSS .container{ position: absolute; left: 600px; top: 0; } .container ul{ list-style: none; width: 9999px; } .container ul li{ width: 200px; height: 400px; float: left; background: red; margin: 4px; } .animate-3d{ -webkit-transition: -webkit-transform 10s linear; -webkit-transform: translate3d(-6000px, 0px, 0px) } .animate-transition{ transition: left 10s linear; left: -6000px; […]

CSS3 Transition不再在Chrome中运行了

据我所知，到目前为止，我对CSS3过渡没有任何问题。 突然（可能是因为对我的代码进行了Chrome更新或其他修改），它刚刚停止使用chrome（32.0.1700.77），但仍适用于所有其他浏览器（以及较旧版本的chrome）。 @media screen and (max-width: 1325px) { .row-offcanvas { position: absolute; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; width: 100%; } button.toggle { display: inline-block; } .row-offcanvas-left, .sidebar-offcanvas { left: -239px; z-index: 9999; height: 700px; } .row-offcanvas-left.active { left: 239px; } .sidebar-offcanvas { position: absolute; top: 0; width: 239px; […]

CSS3使用toggleClass进行转换

我在div上设置了-webkit-transition-duration属性，其高度由另一个类设置。 当我使用jQuery来切换类时，转换会做一些时髦的事情。 它一直向上，然后被设置到适当的高度，而不是从50px高度移动到自动高度，这是我期望它做的。 有什么办法解决这个问题？ 这是一个演示： http ： //jsfiddle.net/XcFxQ/1/

一个总是触发的“过渡”事件，只有一次

我需要一个特殊的transitionend like事件，在所有转换完成后触发一次，或者如果CSS中没有定义转换则立即触发。 这就是我到目前为止所得到的： (function($){ $.event.special.transitionsComplete = { setup: function(data, namespaces, eventHandle){ var queue = [], style = window.getComputedStyle(this, null), computedProps = style.getPropertyValue(‘transition-property’).split(‘, ‘), computedDurations = style.getPropertyValue(‘transition-duration’).split(‘, ‘), $node = $(this); // only count properties with duration higher than 0s for(var i = 0; i 0){ $node.on(‘webkitTransitionEnd.x transitionend.x’, function(e){ queue.splice(queue.indexOf(e.originalEvent.propertyName)); if(queue.length < 1) $node.trigger('transitionsComplete'); }); // […]

是否可以在Javascript中的css3转换期间获取目标css属性值？

我有两个divs 绝对定位 ，我将它们相对于彼此定位。 当一个width改变时，我重新计算并设置位置。 当我在’ width ‘属性上使用css3过渡时，当我尝试获得动画的’ width ‘时，它会给我dom上的当前值。 但我希望在转换效果开始时获得转换的目标值以正确设置位置。 这可以通过javascript或其他方式获得目标值吗？ 编辑 下面是一个jsfiddle演示我的问题。 它提醒’100px’，但我需要’300px’。 http://jsfiddle.net/Mdbgs/ 谢谢。

在页面加载时触发CSS3转换

我试图通过CSS3宽度转换实现页面加载的加载效果。 这是演示 。 HTML CSS .skill-bar { width: 57%; float: left; height: 11px; border-radius: 5px; position: relative; margin: 6px 0 12px 0; border: 2px solid #00edc2; } .skill-bar span { background: #00edc2; height: 7px; border-radius: 5px; display: inline-block; } .skill-bar span.w70 { width: 70%; } .skill-bar span { width: 0; transition: width 1s ease; -webkit-transition: […]

如何停止CSS3过渡

我想停止正在进行的转换。 我发现一些散布在互联网上的参考文献[1] [2]，但我似乎无法把它拼凑在一起。 这是第一个建议的小提琴（用jQuery和CSS Transit作为上下文）： http ： //jsfiddle.net/thomseddon/gLjuH/ 谢谢 [1] https://twitter.com/evilhackerdude/status/20466821462 [2] github.com/madrobby/zepto/issues/508

Chrome最新更新（V36）后猫头鹰旋转木马过渡效果不起作用

我使用OWl旋转木马一段时间一切都很完美但最近我在Chrome浏览器更新后面临一个问题。 css过渡效果不再适用于chrome。 但所有效果在firefox上运行良好。 任何人都可以帮助我..

CSS3 Transition突出显示在JQuery中创建的新元素

我想使用CSS3颜色过渡将高亮淡化效果（黄色到透明）应用于使用JQuery附加到标记的新元素。 CSS #content div { background-color:transparent; -moz-transition:background-color 2s; -webkit-transition:background-color 2s; -o-transition:background-color 2s; transition:background-color 2s; } #content div.new { background-color:yellow; } HTML add new element JS $(‘#add-element’).click(function() { var newElement = $(‘new element’); $(‘#content’).append(newElement); newElement.removeClass(‘new’); }); 单击链接时，将创建新元素。 它的类是“新”（背景颜色为黄色），它附加到HTML标记。 我应该能够立即删除“新”类以触发背景颜色过渡到透明（或任何其他颜色）。 我显然做错了，因为新元素的背景颜色立即显示为透明，没有过渡效果。 我知道我可以在JQuery UI中执行此操作，但我想使用CSS3过渡。 jsfiddle在这里： http://jsfiddle.net/paulaner/fvv5q/