Tag: css transitions

使用精灵平滑CSS动画

我试图动画我的精灵，它与此类似。 如果有人能展示如何让它更顺畅，我将不胜感激。 我的精灵中只有3张图像。 延迟1秒，所以过渡非常糟糕。 我试过用： from { -webkit-transform: translateX(..); } to { -webkit-transform: translateX(..); } 但它没有用。 我真的很感激任何帮助。

-webkit-transform：使用position：absolute

我有一系列的div使用-webkit-transform从负边距顶部向下滑动到屏幕上的位置。 问题是，如果没有适用于他们的边缘优势，他们最终会坐在他们通常会坐的地方。 这意味着如果我显示第二个div，它有一个空白空间，大小超过它的第一个div。 为了解决这个问题，我可以对第二个div应用负余量顶部，但我认为这很麻烦。 我主要担心的是，如果dropdiv1的高度发生变化，那么我将不得不重置点击function上的值，让其他div在显示时再次正确对齐。 有没有办法修改-webkit-transform以合并postion：absolute？ 我目前的代码是： CSS： #dropdiv1 { -webkit-transform: translate(0, -3000px); -webkit-transition: all ease-in 1s; } #dropdiv2 { -webkit-transform: translate(0, -3400px); -webkit-transition: all ease-in 1s; } #dropdiv3 { -webkit-transform: translate(0, -4200px); -webkit-transition: all ease-in 1s; } JQuery的： $(‘#clickme1’).click( function() { $(‘#dropdiv1’).css(‘-webkit-transform’,’translate(0, -335px)’); }); $(‘#clickme2’).click( function() { $(‘#dropdiv2’).css(‘-webkit-transform’,’translate(0, -2335px)’); }); $(‘#clickme3’).click( function() { $(‘#dropdiv3’).css(‘-webkit-transform’,’translate(0, […]

CSS过渡 – 在固定和绝对定位之间切换

我会试着解释一个让我难过的大问题。 基本上，我有一个#menu介于绝对位置（靠近页面顶部）和固定位置（到窗口顶部，向下滚动页面）之间。 我正在使用jquery来实现这一目标。 当它被修复后，我给它一个“.fixed”类。 这给了它“top：0px; position：relative;”。 #menu有一个转换，但＃menu.fixed删除了转换。 这在开始时很有用，当向下滚动然后使其连接到窗口的顶部时。 当新类删除了转换时，切换位置是完美的。 但是，当我向上滚动并删除“.fixed”类时，它会将（现在）绝对定位的#menu从0px动画到615px。 这意味着它会跳到页面顶部，然后向下滚动，因为它不再固定。 这是代码： $(‘#menu’).css({ top: ‘615px’}); // top was 0px before this. It is still fixed, so it should NOT animated. $(‘#menu’).removeClass(‘fixed’); // Now the transition kicks in //As it’s at 615px, it should stay where it is, not start animating to 615px from 0px as […]

在这种情况下，为什么要向JQuery添加两个链接

我没有Javascript和JQuery的经验，但我在本文档中使用过两者。 第一个是为IE3过渡提供支持，取自CSS3 Hover Transition 。 使用的代码是 seond one用于幻灯片展示，取自幻灯片库 ，代码为 可以看出，以前的CSS3 Transitions链接到jquery 1.6.1，而后来的幻灯片库链接到jquery 1.3.2。 我是否必须同时参考这两个文件？ 我尝试删除一个链接和另一个链接，但如果删除了其中一个链接，则CSS3hover转换既不起作用也不幻灯片Glaeery工作。 如果我将上面的内容放在我的头部元素中，它们就不起作用了。 它们只能工作如果我在页脚之后和身体元素之前将它们放在底部。 以下是我的头标记。 （适用于幻灯片库） document.write(‘.noscript { display: none; }’); 以下是底部。 （适用于幻灯片库） jQuery(document).ready(function($) { // We only want these styles applied when javascript is enabled $(‘div.navigation’).css({‘width’ : ‘300px’, ‘float’ : ‘left’}); $(‘div.content’).css(‘display’, ‘block’); // Initially set opacity on thumbs and add […]

即使在状态更改后激活，也会应用CSS过渡？

我有一个jQuery插件可以在屏幕上移动一个元素，但是有一个“动画”切换来显示幻灯片过渡与否。 在尝试使用CSS Transitions而不是Javascript转换进行更改时，我遇到了这个，我不确定它是否是一个bug /怪癖，或者我只是做错了： var $item = $(‘#myItem’); if (!animate) { $item.removeClass(‘csstransitions’); // Class that has “transition:left 0.25s ease-out” $(‘#myItem’).css(‘left’, ‘300px’); // Move the element $(‘#myItem’).addClass(‘csstransitions’); // Re-apply transitions class } 当这样做的时候，css改变发生在转换类没有应用到元素但是立即应用之后，一些浏览器（Chrome和Safari，在我的测试中） 仍然应用CSS转换 ，当我的逻辑时，它应该只是捕捉到新的位置。 在这个jsFiddle中看到这个实际操作; 在Chrome或Safari中，单击“无延迟”按钮，并看到它仍然为框的位置设置动画，而“延迟”按钮（使用超时设置一毫秒后）不会为CSS更改设置动画。 如jsFiddle中所示，我必须使用setTimeout调用（ setTimeout(function() { $el.addClass(‘csstransition’); }, 1); ）以在Chrome和Safari中获得正确的行为。 这只是因为CSS过渡是前沿，或者我做错了什么，而且有一种更简单的方法可以暂时“转变”过渡？ 编辑：注意到这个问题是类似的，虽然这个问题的答案只是将两个调用分开，但问题仍然是“为什么我们（Web开发人员）需要将这两个调用分开？” 这是我们应该用来切换CSS过渡的方法吗？

如何围绕徽标创建三个元素的轨道

我是新手，我正在进行第一个项目： 我有三个元素（图像）和一个标志。 当我点击图像时，这一个和另外两个应该围绕徽标在360°的轨道上移动（当它们在徽标背面时具有低z-index，因此它们可以消失然后再出现）。 这有可能与jquery和css3？

jQuery褪色发光特殊文字效果

我想制作黑色错误信息文字“发光”，红色轮廓在一秒后消失，但是，如果更新，返回“完全发光”并再次开始消失，即使它没有完全消失首先。 是否有一个相当简单的jQuery / CSS方法来做到这一点？ 我认为两种同步衰落技术会相互竞争，异步和全部，我不知道如何产生发光效果，或者甚至可能使用标准样式。

强制CSS转换在JavaScript函数中多次更新

我知道如何让CSS转换工作，但在这种情况下，我想知道为什么 getComputedStyle()不会更新right类。 这里是使用getComputedStyle()方法强制重新计算样式的引用： jQuery addClass方法链接以执行CSS转换 它工作的一个例子： http ： //jsfiddle.net/j8x0dzbz/8/ 现在这里是我的小提琴不起作用： http ： //jsfiddle.net/me8ukkLe/12/ 这是我的代码： $(‘button’).click(function() { $(‘div div’).eq(0).addClass(‘right’); window.getComputedStyle(document.getElementById(‘blue’)).left; // FORCE “right” CLASS $(‘div div’).eq(0).addClass(‘left_zero’); }); #container { border: 1px solid purple; position: absolute; height: 12px; width: 12px; } #blue { background-color: blue; } button { margin-top: 30px; } div div { position: absolute; width: […]

我应该使用/避免jQuery动画吗？

一个问题突然出现在回答这个问题 ，其中OP希望应用此转换： test.css({transition: ‘height 1s linear’, height: ‘100px’}); 然后回到这个： test.css({transition: ‘none’, height: ‘0px’}); 他说他需要从js完成它，并要求一个更好的主意，所以我提出了这种方法： test.animate({height: ‘100px’}, 1000, ‘linear’, function(){ test.css({transition: ‘none’, height: ‘0px’}); }); 这是我的jsFiddle： https ：//jsfiddle.net/mqaunyvp/1/ @Matrix评论说JS和jQuery动画不如原生CSS优化，这是正确的，但我认为不是在那个主题中的主题。 所以这是一个问题： 按照我建议的方式完成这项工作是否正确？ 或者你会反对吗？ 为什么？

jQuery绑定到css3转换发生

到目前为止，在我的研究中，我发现的唯一css3过渡事件是transitionEnd。 我想要做的是将一个javascript函数绑定到一个元素，以便在转换发生时不断重新触发。 想想$（window）.resize但是对于使用css3转换resize的元素。 这可能吗？ 我发现没有transitionStart，transitionAnimation或任何其他可以让我检测，转换开始或转换发生的时间。 我更喜欢jQuery的绑定，但其他方法都很好。 此外，这需要在FF，Chrome，Safari和Opera中使用。 谢谢大家！