I have a group of divs which I'm dynamically generating when a button is clicked with the class, "brick". This gives them dimension and starting position of top: 0. I'm trying to get them to animate to the bottom of the view using a css transition with a second class assignment which gives them a bottom position: 0;. Can't figure out the syntax for adding a second class to elements with a pre-existing class. On inspection they only show the original class of, "brick".
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="button" >Click Me</div>
</div>
</body>
</html>
CSS
#container {
width: 100%;
height: 100vh;
padding: 10vmax;
}
#button {
position: fixed;
}
.brick {
position: relative;
top: 0;
height: 10vmax;
width: 20vmax;
background: white;
margin: 0;
padding: 0;
transition: all 1s;
}
.drop {
transition: all 1s;
bottom 0;
}
The offending JS:
var brickCount = function() {
var count = prompt("How many boxes you lookin' for?");
for(var i=0; i < count; i++) {
var newBrick = document.createElement("div");
newBrick.className="brick";
document.querySelector("#container")
.appendChild(newBrick);
}
};
var getBricks = function(){
document.getElementByClass("brick");
};
var changeColor = function(){
getBricks.style.backgroundColor =
'#'+Math.floor(Math.random()*16777215).toString(16);
};
var addDrop = function() {
getBricks.brick = "getBricks.brick" + " drop";
};
var multiple = function() {
brickCount();
getBricks();
changeColor();
addDrop();
};
document.getElementById("button").onclick = function() {multiple();};
Thanks!
