9

好吧，这将是艰难的……希望大师们提出解决方案！

这很难解释，但这里有..

我有两个要素：

<style>
#elem1 {
position:absolute;
left:-1400px;
z-index:1000;
width:100%;
}
.anim {
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -ms-transition: transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  transition: transform 0.5s ease;
}
.overr {
  transform:translate(1400px,0);
  -ms-transform:translate(1400px,0); 
  -webkit-transform:translate(1400px,0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}  
</style>
<script>
$('#btn a').click(function(){
 currentPos = $(window).scrollTop();
 $('#elem1).toggleClass('overr');
 $('#elem1).attr('style', 'top:' + currentPos + 'px;');

 setTimeout(function() {
  $('#elem2').toggle(0);
  $('#elem1').attr('style', 'top:0');
  $(window).scrollTop( 0 );
  }, 500)
});
</script>

<div id="elem1" class="anim">content here</div>
<div id="elem2">content 2 here></div>

我在这里想要实现的是：元素 2 根本没有样式，只是一个普通的元素。单击按钮，获得#elem2 位置，将#elem1 像抽屉一样从左侧拉出，使其顶部位于屏幕的当前位置，然后隐藏#elem2，#elem1 到顶部并且屏幕向上滚动。

结果是，我在同一页面上，在底部的顶部加载完全不同的内容，我可以滚动而不会过度滚动（这在 iphone 上非常需要 - 移开顶部和底部栏 - 实际上这是我需要这个的原因）。

问题：

问题是屏幕在最后一个 $(window).scrollTop( 0 ) 处闪烁 - 该死的屏幕闪烁。如果我在页面顶部启动脚本，它不会闪烁。

a）我尝试更改脚本的顺序，但更改内容并没有给我所需的结果。b) 将过渡效果更改为“线性”会使效果更好，但您仍然可以看到它。

我知道这件事很难，但希望有人能帮助我！

编辑：它看起来像 $('#elem2').toggle(0) 和 $(window).scrollTop(0) 同时触发，所以在它闪烁的瞬间看起来它也带来了#elem2顶部，这就是它闪烁的原因......：/到目前为止，我浪费了大约 4 个小时 :(

edit2：即使完全删除动画过渡，仍然会闪烁。我去睡觉了，不能再保持清醒了..希望我能得到一份早间礼物：/

4

6 回答 6

1

如果是白闪，这其实是css3的问题。我以前也遇到过这种情况，试着补充一下。

-webkit-transform-style: preserve-3d;

.anim 和 .overr 类。

于 2013-12-12T23:41:56.537 回答
0

不幸的是，iOS 处理元素转换的方式有点奇怪。他们在卷轴的末尾“刷新”。我知道如何避免这种情况的唯一方法是使用一些静态元素，例如导航栏或浮动页脚。他们不使用任何 javascript 或 CSS 来改变他们的呈现方式。我知道这不是一个解决方案，但希望这可以帮助您更好地理解 iOS webkit :)

于 2013-12-12T00:28:39.790 回答
0

不确定这是否会对您有所帮助，但我在 ios 滚动动画方面遇到了类似的问题。我通过使用 scrollTo 插件并设置轴来解决它，例如：

$.scrollTo(target, 400, {offset:-60, axis:'y'});

这是我发现的唯一可以阻止闪烁的东西。

于 2013-11-12T15:13:42.747 回答
0

我的解决方案没有直接关系，但它包括闪烁的固定元素和 scrollTop()，所以我相信谷歌会在这里找人。

我将动画放在步骤中，而不是直接为 scrollTop 属性设置动画。希望有帮助。

var position_st = $(window).scrollTop();
var position_en = $(scroll_to_selection).offset().top;

$('#body-animator').stop().animate({
    textIndent: 100
}, {
    duration: 750,
    step: function(num) {

        var val = (num / 100 * (position_en - position_st)) + position_st;

        $('html, body').scrollTop(val);

    },
    complete: function() {

        $(this).css({
            textIndent: 0
        });

    }
});
于 2013-12-03T19:41:36.770 回答
0

您是否考虑过使用动画功能？可以实现这一点，以便在前一个动画完成之前不会发生后续样式更改。显然，您可以根据需要嵌套尽可能多的动画（出于说明目的，我只在下面嵌套了几个），这消除了多任务处理时出现的问题。

<style type="text/css">
    #elem1 {
    position:absolute;
    left:-1400px;
    z-index:1000;
    width:100%;
    }
</style>
<input id="btnA" type="button" value="Click Me" />
<div id="elem1">Element 1</div>
<div id="elem2">Element 2</div>
<script type="text/javascript">
    $('#btnA').click(function () {
        currentPos = $(window).scrollTop();
        $('#elem1').animate(
            { left: 0 }
            , {
                duration: 500
                , easing: "linear"
                , complete: function () {
                    $('#elem2').toggle(0);
                    $('#elem1').animate(
                        { top: 0 }
                        , {
                            duration: 0
                            , complete: function () {
                                $(window).scrollTop(0);
                            }
                        }
                    );
                }
            });
    });
</script>

参考资料：http ://api.jquery.com/animate/

于 2013-10-28T11:30:23.380 回答
0

我想滚动到具有 0ms 动画的页面顶部，但大多数时候滚动后会闪烁 - 在 ios 8.3 上。我回去添加一个 400 毫秒的动画并为此放弃了 ScrollTo：

$('html, body').animate({
    scrollTop: 0
}, 400);

现在得到 0 闪烁.. 和一个很好的动画滚动到页面顶部。1000 毫秒是生涩的。希望这可以帮助某人。

于 2016-10-08T15:03:04.957 回答