Invalid transition animation
Have you ever encountered this situation: you have set a transition animation in CSS, but it doesn't work when you use it.
The following code is an example.
In this code, we try to control a div element with JavaScript and render an animation effect, where the height gradually changes from 100px to 200px.
But in fact, this code does not work properly: there is no animation effect, but instead a square element with a height of 200px appears directly.
The following code can be copied for testing.
<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>
Solution
The solution to this problem is quite magical, and it only requires one line of code: var height = div_1.clientHeight.
Insert this line of code into the following location
Note: Display comes after width and height.
Run it again, and you will find that the transition animation effect appears.
Technical Principle
Why did the animation effect appear when I added a line of code var height = div_1.clientHeight?
This is because the display of the element is originally set to none, which is invisible. Setting it to block in the JavaScript code makes it visible, and then setting a new height and width, the browser displays the div directly at this size.
The new line of code added is to get the height of the div. In order to get the exact height value, the browser needs to render the div first, and the height and width of the div are still 100px at this time. Then, in the following statement, when the height and width of the div are set to 200px, a transition animation from 100px to 200px can be triggered.
Simply put, not displaying animations before is a kind of "lazy" behavior of browsers.
Although only a very simple line of code is used, it is a very clever line of code that contains clever technical principles. If you want to protect the technical logic of this line of JavaScript code, you can use JShaman to obfuscate and encrypt the JavaScript code, making it impossible for others to read and analyze the code.
For example, the code of the translate_div function in the above example will be encrypted by JShaman and become.
In this way, they can protect their technological secrets and achieve "defensive programming" for themselves.
Top comments (0)