可能重复:
iphone webkit css动画导致闪烁
出于某种原因,在我的webkit-transform属性动画发生之前,有轻微的闪烁.这是我在做的事情:
CSS:
#element {
-webkit-transition: -webkit-transform 500ms;
}
JavaScript的:
$("#element").css("-webkit-transform", "translateX(" + value + "px)");
在转换发生之前,有一个闪烁.知道为什么会这样,以及我如何解决问题？
谢谢!
更新:这只发生在Safari中.虽然动画确实有效,但在Chrome中却不会发生这种情况.
有没有办法禁用它？
我只是在浏览器中...当您单击链接或按钮或具有单击功能的div时,它会闪烁一个灰色框,您可以快速单击该框.我该如何防止这种情况？
所有,
我正在开发专门针对iPad的网络应用程序,我正在使用CSS3过渡来为div设置动画(从左到右移动).
我的班级看起来像这样:
.mover {
-webkit-transition:all 0.4s ease-in-out;
}
当用户单击按钮时,我这样做:
var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);
除了第一次用户触发转换之外,这种方法效果很好; 第一次,有一个非常明显的闪烁.
我意识到我不需要使用translate3d,因为我只是左右移动div,但据我所知,这迫使iPad使用GPU加速.(它是否正确？)
提前谢谢了!
[UPDATE]
关于"闪烁",我有点模棱两可.简而言之 - 我一直在尝试各种各样的CSS3过渡(特别是在iPad上),并且始终如一 - 我注意到在过渡的开始或结束时有明显的闪烁.
换句话说,转换本身非常顺利.但是,根据精确设置,在转换开始或结束之前会有明显的闪烁.
这是另一个例子:我有三张照片(PNG)堆叠在一起.
底部PNG的不透明度= 1.0,顶部2的不透明度= 0.0.使用-webkit-keyframes,当照片淡入和淡出时,我能够获得丝般平滑的过渡.当动画结束时,底部照片以opacity = 1.0结束,前两个以opacity = 0.0结束.(这应该是他们的最终状态).
然而,正如动画结束一样,底部照片闪烁.就像浏览器强制重绘/重绘屏幕一样,这需要几分之一秒.
破坏效果已经足够糟糕,然后渲染转换不可用.(在我的iMac上它几乎,但不是很难以察觉.在iPad上,这是不容错过的).
最近,我去我的导航栏来充当,是坚持我的页面的顶部后,我向下滚动到某一点,但是当我达到我的整个页面的内容导航栏闪烁底部的粘性导航栏,有时甚至消失.把它想象成一个会闪烁的旧电视,你最终会撞到一边停止闪烁.如何点击我的导航栏以阻止它闪烁. 这是我的网站,所以你可以看到闪烁的所有荣耀.
这是我的导航HTML:
<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix">
<div class="navbar-inner" data-spy="affix-top">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#service-top">Services</a></li>
<li><a href="#contact-arrow">Contact</a></li>
</ul><!--/.nav-->
</div><!--/.nav-collapse collapse pull-right-->
</div><!--/.container-->
</div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->
这是我的JS:
<script>
$(document).ready(function() {
$('#nav-wrapper').height($("#nav").height()); …海.
CSS3中的翻译过渡属性是什么？我目前正在使用,all但我在iOS中遇到了一个错误,所以我想测试另一个属性.
-webkit-transform: translate(-320px, 0);
-webkit-transition: ??? .5 ease-in-out;
在这里查看iOS设备的错误(水平滑动),有一种闪存.
更新:对任何感兴趣的人,我找到了一种解决方法,感谢Duopixel:
E {
-webkit-transition: all .5s ease-in-out;
-webkit-transform: translate3d(0, 0, 0); // perform an "invisible" translation
}
// Then you can translate with translate3d(), no bug!
document.querySelector('E').webkitTransform = 'translate3d(-320px, 0, 0)'
我有一个简单的多列布局; 我想举一个元素上:hover使用translateY.
它会导致闪烁(在Chrome 57上测试).我该如何解决？
"use strict";
$(function () {
var $target = $('.wall');
function getImageUrl(id) {
var width = 500;
var height = 250 + Math.floor(Math.random() * 150);
return "https://unsplash.it/" + width + "/" + height + "?image=" + id;
}
function addElement(element) {
var $template = $target.find('.template').clone().appendTo($target).removeClass("template");
$template.find("a").attr("href", element.post_url);
$template.find("img").attr("src", getImageUrl(element.id));
$template.find("figcaption").text(element.author);
$template.removeClass("hide");
}
$.getJSON("https://unsplash.it/list", function (data) {
var images = 12;
var elements = [];
function getRandomImage() {
var id = Math.floor(Math.random() * data.length); …首先,感谢令人惊叹的apache cordova团队制作一个独立于平台的本地应用程序构建平台 - 非常棒的东西.
但是,我们知道HTML5仍处于草案模式,而我正在考虑将Cordova应用于这个方向,那么现在Cordova的技术限制是什么？
与Sencha Touch 2相比,有什么优点和缺点,因为我看到在我的Cordova搜索过程中出现了ST2.
以下是我为BX滑块简单实现的代码:
var slider = $('#bxslider').bxSlider();
<ul id="bxslider">
<li>
<img class="carouselimage" src="images/01e_image.jpg" />
</li>
<li >
<img class="carouselimage" src="images/01c_image.jpg" />
</li>
<li >
<img class="carouselimage" src="images/01a_image.jpg" />
</li>
</ul>
我已经正确使用了所有内容,没有额外的CSS和JS.
当我通过单击左箭头从头到尾(反向)进行转换时,最后一张幻灯片向右移出容器一秒钟然后回到原始状态,看起来像一个闪烁.
有人有任何线索吗？
提前致谢.