仿拉勾官网图片随鼠标滑入效果，有个小疑问

[noBoundary]

效果

鼠标滑入元素后， hover 层从鼠标滑入的边界处滑入。

源码

源码传送门

在线实例

实例传送门

请大家无视兼容性问题，该问题在整体完成后再解决。

疑问

在我写的方法中，每当触发mouseenter事件时，需要将 hover 元素移动至事件触发时边界的外面，然后再移入。但若编写如下代码：

var div = document.querySelector('div');

div.style.left = '0';
div.style.left = '100px';

当真正调用时，由于 javascript 引擎优化，元素的 left 会被直接设置为 100px ，无法达到我的目的。

目前我的解决方案是使用定时器，将第二次坐标的改变延迟，形如：

div.style.left = '0';

setTimeout(function(){
    div.style.left = '100px';
},20);

请问：
有没有其他更好的方式解决该问题？

[shoaly]

你提问题的姿势好优美

[noBoundary]

@shoaly 是我提问方法有问题么。。还是说我没描述清楚。。。

[titanp]

提问姿势确实优美

[titanp]

@noBoundary 是真的优美＝。＝ 没有反义

[Marfal]

@noBoundary 哈哈哈哈

[TakanashiAzusa]

讲真，完整代码太长，不怎么想看。不负责任的提个意见，你可以试试看：（因为自己没有尝试过，不保证有效）
两个连续赋值语句之间加个 console 打断一下。

[hienchu]

有没有试用 transform 而不是直接把元素移出去

[secondwtq]

代码留下了，最近也要做一个类似的效果，谢谢楼主分享。

我记得有特别的 trick 可以强制 reflow 的执行，楼主可以搜索一下，不是特别确定，并且貌似也并不是什么好的 practice 。

[anthozoan77]

真的优美，学习提问的姿势...

[noBoundary]

我找到了一个新的方法触发 flow ，替换定时器方案，原理是获取该元素的属性，形如：

```javascript
div.style.left = '0px';
window.getComputedStyle(div,null)['left'];
div.style.top = '100px';
```

同时源码做了部分更新，兼容性还未处理完毕～希望大家有空可以看看，提提建议。如果有需要，可以 star 一下～

源码地址见问题部分。