在触摸移动时触发时 CSS 过渡不一致
css transition inconsistent when triggered on touch move
当用户滚动到某个点以下时,我正在触发 css 位置更改(带有 css 过渡动画)。 这在PC上的chrome/safari上运行良好,但在iPhone上不一致。它有时会跳跃而不是动画,有时它什么都不做,偶尔会动画化。
我尝试使用jQuery animate,添加了translate3d并将元素放在自己的图层上,所有这些都产生了相同的结果。
代码如下:
var logoUp = false;
$(window)[0].addEventListener('touchmove', function(e) {
console.log($(window).scrollTop());
if ($(window).scrollTop() > 33) {
if(!logoUp){
$('.trig_logo').css({ 'top': '-90px' })
logoUp = true;
}
} else {
if(logoUp){
$('.trig_logo').css({ 'top': '0px' })
logoUp = false;
}
}
})
.CSS
.trig_logo {
background:url(/img/head_foot/logo.png) center 0px no-repeat;
height:400px;
position: absolute;
width:100%;
top:0px;
-webkit-transition: 0.25s top;
}
我很惊讶-webkit-transition
在iPhone上工作。
通常,您会看到类似以下内容:
-webkit-transition: .25s top;
-moz-transition: .25s top;
-o-transition: .25s top;
transition: .25s top; /* <-- actual standard */
供应商前缀很棒吧?(不是)
相关文章:
- 当属性不一致时,如何根据属性对JS对象列表进行排序
- Android和JavaScript解析API之间不一致
- Javascript的行为与PHP包含文件不一致
- 对这种与document.domain和CORS相关的不一致行为的解释是什么
- 点击链接行为不一致
- Passport.js`isAuthenticated()`不一致的行为;当它应该是真的时候是假的
- 渐进式增强-不使用CSS隐藏元素
- 如何在不使用css转换的情况下将jQuery animate与css3属性相结合
- 与显示不一致
- 新的javascript HTML元素不遵循css规则
- Ext 4.2.1 模型日期解析在浏览器之间不一致
- 通过 Dropbox API 上传时的文件内容不一致
- JavaScript - 对象属性不一致
- Cordova在设备上构建时不使用css和js
- Javascript 混淆了 null、instanceof 和 typeof 的语法不一致
- localeCompare 显示使用前导变音字符对单词进行排序时不一致的行为
- 在不使用 CSS 的情况下,将元素与浏览器屏幕顶部保持设定的距离
- 遍历 CSS 样式 - 样式命名不一致
- 在触摸移动时触发时 CSS 过渡不一致
- 通过JavaScript应用不一致的CSS