实现是看不太明白老师到底是想要一个怎样的结果？

Question

如题所述。图上的能实现，但是看不太懂老师要描述的东西

Answer 1

xincai 2017-04-08 17:32:12

我也看不懂，这两点“

// 任务二：(1)支持 relativeTo参数（CSS translate 实现方法）

    // 任务二：(2)获取 relateveTo 元素的位置，应该用 offsetLeft、offsetTop

”感觉奇奇怪怪的，根据自己的理解代码如下：

    // 任务二：(1)支持 relativeTo参数（CSS translate 实现方法）

    // 任务二：(2)获取 relateveTo 元素的位置，应该用 offsetLeft、offsetTop

    // 任务二：(3)考虑 cfg.center 对relativeTo参数的影响，并且在有、没有这两种情况下都要支持

    cfg.relativeTo &&  component.css('transform','translate(cfg.relativeTo.x || 0,cfg.relativeTo.y || 0)');

    

    component.on('onLoad',function(){

    

        // 任务二：(1)支持relativeTo参数（修改 DOM 结构实现方法）

    cfg.relativeTo &&  component.offsetTop(cfg.css.top && cfg.css.top + cfg.relateveTo.y);

    cfg.relativeTo && !cfg.center && component.offsetLeft(cfg.css.left && cfg.css.left + cfg.relateveTo.x);

        setTimeout(function(){

            component.addClass(cls+'_load').removeClass(cls+'_leave');

            cfg.animateIn && component.animate( cfg.animateIn );

        },cfg.delay || 0)

        return false;

    })

还望老师或哪位大神点评下，在此跪谢了！！！

Answer 2

提问者 慕村5414681 2016-06-22 15:51:48

这个知道。主要的意思，是要怎样一个不一样法？根据上一个关联的组件的位置+height+新组件的top来计算新的组件的纵向偏移吗？

• Lyn #1

  就是这个意思，可以忽略 height ，直接根据位置重新计算X、Y的偏移就好。

Answer 3

Lyn_Tech 2016-06-22 10:56:26

文案我自己也觉得描述的不太清晰，回头改改，主要结合图来看。

1. 两个组件的定位， left、top 都是一样的，但是位置不一样

2. 后面的组件多了个 relativeTo 参数

问题：relativeTo 参数传入后，怎么修改代码，可以达到和图一样的效果。