Tag: translate3d

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’ }, […]

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动画translate3d不起作用: 我一直在尝试使用jQuery animate和CSS3 animate，我也想测试2D / 3D翻译以查看哪个更好。有谁知道为什么我的CSS3 translate3d不起作用？我在桌面和移动设备上试过它。任何帮助赞赏的jsfiddle HTML transition translate translate3d jQ animate CSS .container {position:absolute; left:20px; width:80px; height:80px; padding:5px;} /* transition */ #container1 {top:20px; background:red; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -ms-transition:all 0.3s linear; transition:all 0.3s linear;} #container1.on {left:250px} /* It moves if from pos absolute of parent, […]