一行奇异代码，解决transition过渡动画无效问题！
原创一行奇异代码，解决transition过渡动画无效问题！
原创
一行奇异代码，解决transition过渡动画无效问题！
无效的transition过渡动画
你是否遇到过这种情况：在css中设置了transition过渡动画，但使用时，却无效。
例如以下代码，便是一例：
在此代码中，试图用JavaScript控制一个div元素，并呈现动画效果，高宽度都由100px渐变成为200px。
但实际上，这段代码无法正常工作：不会出现动画效果，而是直接出现了一个高宽度为200px的正方形元素。
可复制以下代码测试：
<html>
<head>
<style>
.div_1_class{
width: 100px;
height: 100px;
background-color: red;
display: none;
transition: width 2s;
}
</style>
</head>
<body>
<div id="div_1" class="div_1_class"></div>
<button onclick="translate_div()">Translate</button>
<script>
function translate_div() {
var div_1 = document.getElementById('div_1')
div_1.style.display = "block";
div_1.style.width = "200px";
div_1.style.height = "200px";
}
</script>
</body>
</html>解决办法
这个问题的解决办法非常神奇，仅需一行代码：var height = div_1.clientHeight。
将这行代码，插入以下位置：
注：display之后，width、height之前。
再次执行，你会发现，transition过渡动画效果出现了。
技术原画
为什么加了一行var height = div_1.clientHeight代码，就出现了动画效果？
这是因为，元素本来的display是none的不可见状态。在JS代码中将其设置为block，使之显示了出来，并紧接着设置了新的height、width，那么浏览器就按这个大小直接显示出此div。
而加入的一行新代码，是获取div的高度。浏览器为了获得确切的高度值，这时就需要将div先渲染出来，此时div的高宽还各是100px；然后，接下来的语句，将div的高宽设为200px时，就可以触发由100px到200px的过渡动画。
简单来说，此前不显示动画，是浏览器的一种“偷懒”行为。
代码安全
虽然仅是使用了一行很简单的代码，但却是一行非常精妙的代码，蕴含有巧妙的技术原理。如果你想要保护这行JS代码的技术逻辑，可以使用JShaman对JS代码进行混淆加密，使他人无法阅读代码、分析代码。
比如上例中translate_div函数的代码经JShaman混淆加密后会变成：
这样就保护了自己的技术秘密，为自己实现了“防御性编程”。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。