css - 问一个回流(reflow)相关的问题
本文介绍了css - 问一个回流(reflow)相关的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 100px; height: 100px; background: #eee;
}
.slide-left {
-webkit-transition: margin-left 1s ease-out;
-moz-transition: margin-left 1s ease-out;
-o-transition: margin-left 1s ease-out;
transition: margin-left 1s ease-out;
}
</style>
</head>
<body>
<div class="slide-left"></div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
var $slide = $('.slide-left');
$slide.css({
"margin-left": "100px"
});
//console.log($slide.css('padding'));
$slide.addClass('slide-left');
$slide.css({
"margin-left": "10px"
});
</script>
</body>
</html>其中如果我将console 注释掉,动画效果就不会生效,如果不注释掉,就生效.
我想问一下这个是什么原因?
来源: https://zhuanlan.zhihu.com/p/...
解决方案
在codepen里什么区别也没有，都是从left-margin:0变化到left-margin:20px;
原因在于第一个动画刚开始，margin-left的值就变了，于是第二个动画就把第一个覆盖掉了，有没有那行console不应该有任何区别
这篇关于css - 问一个回流(reflow)相关的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
