Full explanation you can see here, as much as I understand, for Chrome, Safari, Opera and FireFox syntax is:
-webkit-transition
for Internet Explorer syntax is:
transition
I will show example just for Chrome.
HTML:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> <div id="parentDiv"> I belong to the parent </div> </body> </html>
CSS:
#parentDiv { border-style: solid; border-width: 5px; height: 100px; width: 100px; -webkit-transition: height 15s; } #parentDiv:hover { height: 8000px; }
Notice line:
-webkit-transition: height 15s;
here we said that we want to see transition for height, and line:
#parentDiv:hover
Here we are changing height when we come with mouse over.
Example:
I belong to the parent
---
Event which we can use is "webkitTransitionEnd".For example, HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="index.css"> <script type="text/javascript" src="jquery-2.1.3.js"></script> <script type="text/javascript" src="index.js"></script> </head> <body> <div id="main"> <div id="maxHeightDiv"> Main div with max height <div id="nestedDiv"> Div which is going to move </div> </div> </div> </body> </html>CSS:
div { overflow-y: auto; } #maxHeightDiv { min-height: 100px; max-height: 100px; width: 100px; overflow-y: auto; padding: 60px 0 0 0; } #nestedDiv { overflow-y: auto; border: 2px solid #a1a1a1; height: 40px; -webkit-transition: height 2s; } #nestedDiv:hover{ height: 100px; -webkit-transition: height 2s; } #maxHeightDiv::-webkit-scrollbar { display: none; }JS:
function myScroll() { $('#maxHeightDiv').scrollTop(10000); } window.onload = function () { $("#nestedDiv").on("webkitTransitionEnd", function () { myScroll(); }); }Hover with mouse over "Div which is going to move", and wait a little bit. Real life example:
Main div with max height
Div which is going to move
As you can see scroll will happen only when transition is over.