BUG笔记：Android原生浏览器不认负百分数margin致Foundation Orbit往右滑动动画出错...

青旅半醒 2021-11-10 22:10 87阅读 0赞

> 一看这标题就知道无比蛋疼了是不？至少我从来不用安卓自带的浏览器。。。

发现这个bug的场景：万恶的Foundation，它的滚动图片插件Orbit在安卓自带浏览器下手指从左往右滑动时动画仍旧表现为从右往左滑动。只有在安卓自带浏览器下会发生哦！

罪魁祸首是foundation写这个插件时候用jQuery的css动画从'marginLeft':'-100%'到'marginLeft':'0%'来实现从图片从左往右滑动进来。而这个傻浏览器并不认负的百分数，不过能认负的数值。

同时要注意的是，两个百分数要同时改成数值才有效，也就是说-100px到0%的动画也会出错。但100%到0的动画没问题。

以下是修改的代码截取片段：

var SlideAnimation = function (settings, container) {
            var duration = settings.animation_speed;
            var is_rtl = ($('html[dir=rtl]').length === 1);
            var margin = is_rtl ? 'marginRight' : 'marginLeft';
            var animMargin = {};
            //修改前：animMargin[margin] = '0%';
            animMargin[margin] = '0';
    
            this.next = function (current, next, callback) {
                next.animate(animMargin, duration, 'linear', function () {
                    current.css(margin, '100%');
                    callback();
                });
            };
    
            this.prev = function (current, prev, callback) {
                //修改前： prev.css(margin, '-100%');
                prev.css(margin, -prev.width());
                prev.animate(animMargin, duration, 'linear', function () {
                    current.css(margin, '100%');
                    callback();
                });
            };
        };

转载于:https://www.cnblogs.com/jennieji/p/3549232.html

发表评论取消回复

表情：

评论列表（有 0 条评论，87人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android卡片滑动切换动画,Android原生ViewPager控件实现卡片翻动效果

本文实例为大家分享了Android控件ViewPager实现卡片翻动效果的具体代码，供大家参考，具体内容如下先放一张效果图： ![d27872b49556f228c58f

痛定思痛。/ 2022年10月17日 13:52/ 0 赞/ 478 阅读

相关 Android动画学习笔记-Android Animation

转载 [www.cnblogs.com/angeldevil][www.cnblogs.com_angeldevil] [Android动画学习笔记-Android A

柔光的暖阳◎/ 2022年09月24日 15:24/ 0 赞/ 258 阅读

相关负margin用法权威指南

> 本文由[陈陆扬][Link 1]根据[John Imbong][]的《[The Definitive Guide to Using Negative Margins][]》

ゞ浴缸里的玫瑰/ 2022年08月23日 08:24/ 0 赞/ 241 阅读

相关 Android动画学习笔记-Android Animation

3.0以前，android支持两种动画模式，tween animation,frame animation，在android3.0中又引入了一个新的动画系统：property

梦里梦外;/ 2022年08月08日 16:51/ 0 赞/ 282 阅读

相关 margin值与百分数的关系

可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-rig

偏执的太偏执、/ 2022年06月06日 08:25/ 0 赞/ 231 阅读

相关 Android学习笔记： Android动画特效

Android学习笔记： Android动画特效 Android应用中各式各样的交互界面能体现一个Android应用独特的设计理念，为应用增色不少。为了要

朱雀/ 2022年06月05日 09:23/ 0 赞/ 373 阅读

相关京东区块排版负margin用法

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UT

矫情吗；*/ 2021年12月15日 11:41/ 0 赞/ 232 阅读

相关 BUG笔记：Android原生浏览器不认负百分数margin致Foundation Orbit往右滑动动画出错...

> 一看这标题就知道无比蛋疼了是不？至少我从来不用安卓自带的浏览器。。。发现这个bug的场景：万恶的Foundation，它的滚动图片插件Orbit在安卓自带浏览器下手指从

青旅半醒/ 2021年11月10日 22:10/ 0 赞/ 88 阅读

相关负margin实现div的左右排版

使用负margin可以使当前的div左边能容纳下面的div浮动上来，因此把右边的div摆在前面，左边的摆后面，右边的使用负margin就能让左边的浮上来，这样就遮住了右边的左半

╰+攻爆jí腚メ/ 2021年10月20日 00:56/ 0 赞/ 265 阅读

相关我知道你不知道的负Margin

[HiCSS — 海玉’s Blog][HiCSS _ _s Blog] 理论为辅，实战为主，关注前端开发，注重用户体验。 [Home][HiCSS _ _s B

短命女/ 2021年09月10日 11:42/ 0 赞/ 577 阅读