教你解决transition过渡动画无效问题。

一行奇异代码,解决transition过渡动画无效问题!

无效的transition过渡动画

你是否遇到过这种情况:在css中设置了transition过渡动画,但使用时,却无效。

例如以下代码,便是一例:

在此代码中,试图用JavaScript控制一个div元素,并呈现动画效果,高宽度都由100px渐变成为200px。

但实际上,这段代码无法正常工作:不会出现动画效果,而是直接出现了一个高宽度为200px的正方形元素。

可复制以下代码测试:

xml 复制代码
<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混淆加密后会变成:

这样就保护了自己的技术秘密,为自己实现了"防御性编程"。

相关推荐
Jinuss几秒前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海几秒前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手2 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪5 分钟前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪6 分钟前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__8 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工11 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主13 分钟前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端
ruanCat14 分钟前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
Codebee19 分钟前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能