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.