深圳游戏网站开发,WordPress如何添加导航栏,seo是什么工作,建立网站的三种方式一行奇异代码#xff0c;解决transition过渡动画无效问题#xff01;
无效的transition过渡动画
你是否遇到过这种情况#xff1a;在css中设置了transition过渡动画#xff0c;但使用时#xff0c;确无效。
例如以下代码#xff0c;便是一例#xff1a; 在此代码中解决transition过渡动画无效问题
无效的transition过渡动画
你是否遇到过这种情况在css中设置了transition过渡动画但使用时确无效。
例如以下代码便是一例 在此代码中试图用JavaScript控制一个div元素并呈现动画效果高宽度都由100px渐变成为200px。
但实际上这段代码无法正常工作不会出现动画效果而是直接出现了一个高宽度为200px的正方形元素。 可复制以下代码测试
html
headstyle.div_1_class{width: 100px;height: 100px;background-color: red;display: none;transition: width 2s;}/style
/head
bodydiv iddiv_1 classdiv_1_class/divbutton onclicktranslate_div()Translate/buttonscriptfunction 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混淆加密后会变成 这样就保护了自己的技术秘密为自己实现了“防御性编程”。
