Tag: 转换

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 […]

CSS转换在Chrome中无法正常运行: 我的CSS转换在Chrome中无法正常运行。它在Chrome中提供了模糊效果，但在Firefox中运行良好。这是圆圈动画的代码片段。我建议您在Chrome中以及屏幕的最大宽度查看此内容。这是HTML： Inflate! CSS： .bubble { position: relative; left: 50px; top: 20px; transform: scale(1); width: 50px; height: 50px; border-radius: 50%; background-color: #C00; transition-origin: center; transition: all 0.5s; overflow: hidden; } .bubble.animate { transform: scale(30); } .bubble.ani { transform: scale(1); } JavaScript（jQuery）： $(‘button’).click(function() { $(‘.bubble’).addClass(‘animate’); }); $(‘.buuble’).click(function() { $(this).removeClass(‘animate’); $(this).addClass(‘ani’); });

无法在jquery中添加类: 我正在尝试将类（.trans）添加到我在jquery中新制作的克隆。但它不起作用。 …当我将课程直接应用于我的对象时，它的工作完美。我想做的是…… 我从数据库中获取一些图像到我的页面。与foreach循环我显示那些图像.. 然后在jquery clone方法的帮助下，当我点击它时，我创建一个特定图像的克隆，克隆将显示在另一个div中。现在我想为我新创建的克隆添加一个特定的类。但它不工作..（注意：当我在同一个类上直接应用新鲜对象（不是克隆）时，它的工作时间）仅供参考最终结果应该是这样但是在制作克隆之后.. http://jsfiddle.net/66Bna/293/ 这是我的代码…… $(document).ready(function(){ $(“.my_image”).click(function(){ $(this).clone().addClass(“trans”).appendTo(“.block”); }); }); body{ user-select: none; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; } .shape{ width: 300px; height: 250px; background-color: #B2D237; color: #123456; } #bounds { position: absolute; border: 1px solid red; } .block{ width:100%; background:red; } $img) { […]

在CSS3变换后获取div的实际像素坐标: 是否有可能获得已经使用CSS3属性（如scale ， skew和rotate转换的的四个实际角坐标？例：在CSS3转换之前，坐标是 x1y1: 0,0 x1y2: 0,200 x2y1: 200,0 x2yw: 200,200 div看起来像这样：经过一点CSS3魔术transform: skew(10deg, 30deg) rotate(30deg) scale(1, 2); 它看起来像这样：如何获得实际角点（不是边界框）的坐标（使用javascript）？任何帮助非常感谢。

滚动时的CSS3转换: 有谁知道一个很好的教程来实现这一目标？（如下所示： http ： //www.contrastrebellion.com/ ）我已经查看了该网站上使用的代码，发现它很难取出我需要的东西。非常感谢，谢谢编辑：也在这里看到： http ： //playgroundinc.com/ 我想要实现的目标：在我向下滚动时旋转png和旋转速度以匹配滚动速度。

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/

如何删除/切换元素上的hover类（在单击时翻译）而不必再次移动鼠标？: 如果您单击并且不移动鼠标，您将看到按钮的颜色保持为红色！我想要完成的是在你点击并且不移动鼠标之后它仍然移除/切换.hover类。关于jsFiddle的示例 $(function() { var $Btn = $(‘.button’); $Btn.hover(function() { $(this).toggleClass(“hover”); }); $Btn.on(“click”, function() { $(this).toggleClass(‘active’) $(‘.move’).toggleClass(‘angle’); }); }); .move { border: 1px solid #000000; padding: 10px; transition: transform .2s ease; /* have noticed issue is in “transition” */ } .button.hover { color: red; } .angle { transform: translate(100px, 0); } on click still […]

CSS3替换jQuery.fadeIn和fadeOut: 我编写了少量代码来尝试使用CSS过渡来复制jQuery的.fadeIn()和.fadeOut()函数，以便在触摸设备上更好看。理想情况下，我想避免使用图书馆，以便我可以准确地写出我想要的内容，并作为学习练习。 fadeOut效果很好。 fadeIn的想法是使用CSS3过渡来调整元素的不透明度，之后元素将被设置为display:block; （使用is-hidden类）以确保它不是可点击的或覆盖它下面的东西。 fadeIn虽然不起作用。我认为这是因为在删除is-animating类的同时添加了is-animating类。 transitionEnd事件永远不会触发，因为没有发生转换： function fadeIn (elem, fn) { var $elem = $(elem); $elem.addClass(‘is-animating’); $elem.removeClass(‘is-hidden’); $elem.removeClass(‘is-hiding’); $elem.on(transitionEndEvent, function () { $elem.removeClass(‘is-animating’); if (typeof fn === ‘function’) { fn(); } }); }; 和CSS .is-animating { @include transition(all 2000ms); } .is-hiding { // Will transition @include opacity(0); } .is-hidden { // Won’t transition […]

是否可以旋转单词的字符而不是使用css3旋转整个单词: 我试图使用onload窗口事件转换div文本。我知道transform: rotate(360deg) scaleX(-1); 使整个单词旋转，但我需要旋转文本字符并在加载时将它们返回到相同的位置。我的小提琴，并在mysite初始化它将答案标记为正确。仍然需要更好的答案！

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; } 我在这里弄乱了，还是“一气呵成”并不是应该做的事情？所有帮助都非常感谢。