Tag: css transitions

如何使用除最初之外的转换的css元素？

如果我的css样式如下： .transition { transition: left linear .4s; -moz-transition: left linear .4s; -o-transition: left linear .4s; -webkit-transition: left linear .4s; } 和以下的HTML： Test 和以下jQuery： $(function () { $(‘#mydiv’).css(‘left’, ’50px’); $(‘#mydiv’).addClass(‘transition’); }); 尽管事实上在jQuery中设置了css left属性之前，转换类没有添加到mydiv，所以在页面加载时仍然会从0px转换到50px。 我希望能够在页面加载时设置mydiv的初始css left属性（它是基于各种参数计算的）而不是动画，但仍然在初始页面加载后设置了过渡属性（移动mydiv之后）页面加载应该是动画的）。 我怎么能做到这一点？

jQuery Masonry和CSS3

如何维护砌体布局但是当前图像涉及CSS3过渡？ inheritance人我的HTML $(function () { $(‘#container’).masonry({ columnWidth: 1, itemSelector: ‘div’ }); }); 和CSS html { height:100%; } body { width:900px; height:100%; margin:0 auto; margin-top:100px; background-image: url(images/gridbg.png); } #logo { } #container > div { margin: 5px; #imagetrans { position:relative; height:281px; width:450px; margin:0 auto; } #imagetrans img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity […]

如何在jquery传输中暂停和重新启动css3转换

我正在使用jquery中转移动和元素。 我想暂停动画并单击按钮继续播放。 但我无法弄清楚如何做到这一点。 JSFiddle： http ： //jsfiddle.net/b4hwq/2/ 我确实试过了 stop().transition({}); 但这是一个错误。

除非我使用超时，否则CSS转换不起作用

我有几个类： hide是display: none ，而transparent是opacity: 0 。 元素pr_container具有-webkit-transition: opacity 1s 。 以下基于JQuery的代码使元素出现在动画的fasion中： pr_container.removeClass(“hide”); setTimeout(function() { pr_container.removeClass(“transparent”); }, 0); 但是，当我删除setTimeout而不是删除第二个类时，没有动画。 为什么？ 编辑：我正在使用最新的Chrome，我还没有检查过其他浏览器。 编辑：我尝试将两个调用放在同一个setTimeout回调中 – 没有动画。 所以它显然是关于分离。 编辑：这是jsFiddle： http ： //jsfiddle.net/WfAVj/

Bootstrap carousel：如何同时滑动两个旋转木马滑块？

我在单页上有三个旋转木马滑块，我希望它们同时移动其中两个。我们都应该同时更改滑块图像。 两者都有相同数量的图像/幻灯片。 这是我正在使用的代码： jQuery(‘#carousel-example-generic1, #carousel-example-generic2’).carousel({ interval: 4000 }); 我也试过以下代码： jQuery(‘.carousel’).carousel({ pause:’false’ }); jQuery(‘#carousel-example-generic1’).on(‘slide’, function(){ jQuery(‘#carousel-example-generic2’).carousel(‘next’); }); 但左右滑块在更换幻灯片时几乎没有延迟。 这种延迟继续增加。 这类问题有哪些已知问题？ 链接到该网站是这样的 。 JSFiddle： 链接

添加和删​​除两个类之间添加动画的问题

你能不能看看这个演示，让我知道为什么我无法在添加和删除fixed-top和fixed-bottom两个类之间生成平滑过渡（类似Smooth Scroll），而我已经在其中添加了以下css角色？ -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease; var lastScrollTop = 0; $(window).scroll(function(event) { var st = $(this).scrollTop(); if (st > lastScrollTop) { if (st > 500) { $(‘.box’).removeClass(“fixed-bottom”).addClass(“fixed-top”); } } else { if (st < 500) { $('.box').removeClass("fixed-top").addClass("fixed-bottom"); } } lastScrollTop = st; }); […]

每次项目滚动到视口时触发事件

我在页面上有一些项目。 当他们滚动到视图中时，我向他们添加动画类，如下所示： $(window).scroll(function() { var topOfWindow = $(window).scrollTop(), bottomOfWindow = topOfWindow + $(window).height(); $(‘.buckle’).each(function(){ var imagePos = $(this).offset().top; if (imagePos < topOfWindow+400) { $(this).addClass('animate'); } }); }); 这是一个精简的JSFiddle演示 这会触发每页加载动画一次：当图像从视口顶部400px时，类被添加，动画滚动，然后图像保持静态。 但现在，无论用户是向上还是向下滚动，它们都会在每次滚动到视口时进行动画处理。 在演示的情况下，“滚动”元素将在滚出视图后丢失类.animate，并在向后滚动查看时重新应用它。 使用JQuery触发此操作的最有效方法是什么？

3D转换（translate3D）似乎导致移动设备上缓慢的jQuery动画

我正在使用CSS翻译3D并缩放3D以获得响应式导航菜单。 在触摸设备上，更具体地说，iPhone，它在同一页面上导致单独的jQuery动画执行缓慢，几乎就像在动画时闪烁一样。 任何人都可以解释这个问题吗？ 如果它有任何相关性，我使用的是SASS： nav { left: 0; @include transform( translate3d(-100%, 0, 0) ); @include backface-visibility; .nav__block { @include transition( -webkit-transform 500ms ease ); @include transition-delay( ease, 0s ); @include transform( translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9) ); @include transform-origin( 50% 0% ); } } } 下面是一个缓慢运行的jQuery片段： this.container.filter(‘:visible’).animate({ ‘left’: ‘-=’ + self.childWidth + ‘px’ }, […]

使用CSS过渡刷新jQuery Waypoints

我正在使用航点来切换一个基于偏移量创建CSS过渡的类。 这是css过渡减少元素的高度。 我尝试使用刷新function在每个路点通过后重新计算DOM，但我不确定我做得对，或者我在这里稍微受限制。 您可以在此处查看该网站： http ： //dev.rostylesalon.com/ jQuery(‘#aboutwrap’).waypoint( function() { jQuery(‘#aboutwrap .section-header’).toggleClass(‘header-animate’); $.waypoints(‘refresh’); }, { offset: 300 }); jQuery(‘#servicewrap’).waypoint( function() { jQuery(‘#servicewrap .section-header’).toggleClass(‘header-animate’); $.waypoints(‘refresh’); }, { offset: 300 }); jQuery(‘#contactwrap’).waypoint( function() { jQuery(‘#contactwrap .section-header’).toggleClass(‘header-animate’); $.waypoints(‘refresh’); }, { offset: 300 }); 上面的每个部分标题都应该切换一个增加/减少它的高度的类。 我认为’刷新’会重新计算DOM以适应这种情况，但事实并非如此。 航点/锚点最终高于预期。 如果你从一个部分移动到下一个部分，没问题。 但是，如果您使用导航跳过某个部分，则截面标题的结尾略高于视口的顶部。

隐藏元素后，如何使用css3过渡动画元素

使用jQuery的.fadeOut()隐藏一些元素后，是否可以使用css3过渡动画元素移动？ 我在这里找到了一些解决方案（参见“它也适用于网格”部分）： 不过我的情况更像是这样： http ： //jsfiddle.net/CUzNx/5/ Test1 Test2 Test3 Test4 Test5 Test6 Test7 Hide first Show first 我有浮动的div元素，并且在隐藏了一些元素之后，如果其他元素被动画化将是很好的。 可能吗？