I have 2 DIVs in a flexbox container, where they both start of side by side. By removing one of the divs, the other one becomes centered within the container.
I cant seem to find a way of making an animated transition from centered/uncentered. Is there any way of doing this?
HTML:
<div id='wrap'>
<div id='a'></div>
<div id='b'></div>
</div>
<button id='btna' onclick="toggle('a')">Toggle Red</button>
<br>
<button id='btnb' onclick="toggle('b')">Toggle Green</button>
CSS:
#wrap{
width: 400px;
height: 200px;
border: 1px dashed grey;
display: flex;
justify-content: center;
}
#a{
width: 200px;
height: 200px;
background-color: red;
}
#b{
width: 200px;
height: 200px;
background-color: green;
}
JS:
var displayed = [ true, true ];
function toggle( div )
{
if( div == 'a' )
{
if( displayed[0] )
{
$('#a').fadeOut(500);
}
else
{
$('#a').fadeIn(500);
}
displayed[0] = !displayed[0];
}
else
{
if( displayed[1] )
{
$('#b').fadeOut(500);
}
else
{
$('#b').fadeIn(500);
}
displayed[1] = !displayed[1];
}
}
Here is a jsfiddle for what I have so far:
https://jsfiddle.net/uvyLh8m9/6/
The reason for this is that your function fadeIn first make decrease opacity without letting disappear the block, and only then, lets it disappear.
I would do it this way : which means, letting fade out manually and during the same time decreasing the width. Optionally you could call Element.style.display = 'none'; after 500ms using setTimeout(function(){/*code here*/}, 500);
var displayed = [ true, true ];
function toggle( div )
{
if( div == 'a' )
{
if( displayed[0] )
{
//$('#a').fadeOut(500);
document.getElementById('a').style.opacity = 0;
document.getElementById('a').style.width = '0px';
}
else
{
//$('#a').fadeIn(500);
document.getElementById('a').style.opacity = 1;
document.getElementById('a').style.width = '200px';
}
displayed[0] = !displayed[0];
}
else
{
if( displayed[1] )
{
//$('#b').fadeOut(500);
document.getElementById('b').style.opacity = 0;
document.getElementById('b').style.width = '0px';
}
else
{
//$('#b').fadeIn(500);
document.getElementById('b').style.opacity = 1;
document.getElementById('b').style.width = '200px';
}
displayed[1] = !displayed[1];
}
}
#wrap{
width: 400px;
height: 200px;
border: 1px dashed grey;
display: flex;
justify-content: center;
}
#a, #b {
-webkit-transition:opacity 500ms, width 500ms;
-moz-transition:opacity 500ms, width 500ms;
transition:opacity 500ms, width 500ms;
}
#a{
width: 200px;
height: 200px;
background-color: red;
}
#b{
width: 200px;
height: 200px;
background-color: green;
}
<div id='wrap'>
<div id='a'></div>
<div id='b'></div>
</div>
<button id='btna' onclick="toggle('a')">Toggle Red</button>
<br>
<button id='btnb' onclick="toggle('b')">Toggle Green</button>
Related
I am trying to make connect4 HTML game and I know I will be better off using canvas elements instead of a grids of divs but is it possible to make transition translate type of css animation when moving HTML elements around like this (using appendChild)
const row1 = document.getElementById("row1")
const row2 = document.getElementById("row2")
const ball = document.getElementById("TheBall")
ball.addEventListener("click", (event, element) => {
let rowNum = parseInt(ball.dataset.row)
if(rowNum==1) {
row2.appendChild(ball)
ball.dataset.row = 2
} else {
row1.appendChild(ball)
ball.dataset.row = 1
}
})
#main {
left:100px;
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
}
#main div {
margin: 50px 0;
width: 50px;
height: 50px;
}
#TheBall {
width: auto;
height: auto;
background-color: red;
border-radius: 100%;
}
<div id="main">
<div id="row1"> </div>
<div id="row2">
<div id="TheBall" data-row=2></div>
</div>
</div>
Click on the red dot to toggle position of ball
You can use animationend to check when the animation end and move the ball element between the divs
const row1 = document.getElementById("row1")
const row2 = document.getElementById("row2")
const ball = document.getElementById("TheBall")
ball.addEventListener('animationend', () => {
ball.classList.remove("animate-ball");
ball.style.animation = "";
let rowNum = parseInt(ball.dataset.row)
if (rowNum == 1) {
row2.appendChild(ball)
ball.dataset.row = 2
} else {
row1.appendChild(ball)
ball.dataset.row = 1
}
});
ball.addEventListener("click", (event, element) => {
let rowNum = parseInt(ball.dataset.row)
if (rowNum == 1) {
ball.style.animation = "MoveDown 1s linear";
} else {
ball.style.animation = "MoveUp 1s linear";
}
ball.classList.add("animate-ball");
})
#main {
left: 100px;
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
}
#main div {
margin: 50px 0;
width: 50px;
height: 50px;
}
#TheBall {
position: relative;
width: auto;
height: auto;
background-color: red;
border-radius: 100%;
}
.animate-ball {
animation-iteration-count: 1;
position: absolute;
bottom: 0;
}
#keyframes MoveUp {
0% {
top: -50px;
}
100% {
top: -100px;
}
}
#keyframes MoveDown {
0% {
top: 0;
}
100% {
top: 50px;
}
}
<div id="main">
<div id="row1"> </div>
<div id="row2">
<div id="TheBall" data-row=2></div>
</div>
</div>
I am creating a little game that should be like a 2d version of "guitar hero" (if you don't know what "guitar hero" is don't worry, it was just to give context). I have a red square creator function called squareCreator that adds each new square created a CSS class of .newMostLeftNote. Afterward, I want each one of those squares to fall down (like gravity) using the function fallingMostLeftNote. The problem is that the margin-top that function adds to the square generated by the squareCreator adds to every single square at the same time (even before the square is created), so a square could be created when the .newMostLeftNote CSS class has a margin-top of 700 and it appears way at the bottom.
How can I make it so that every square that falls, but starts falling after they appear?
Notice that in this image, every margin-top CSS property for every new generated square is exactly the same.
var mostLeftNoteMarginTop = 0;
function squareCreator(){
var newNote = document.createElement("div");
newNote.className = "newMostLeftNote";
document.body.appendChild(newNote);
}
var generationSpeed = setInterval(squareCreator, 300);
function fallingMostLeftNote() {
mostLeftNoteMarginTop += 2;
$(".newMostLeftNote").css({
'margin-top': mostLeftNoteMarginTop + 'px'
});
}
proc = setInterval(fallingMostLeftNote, 5);
.newMostLeftNote {
height: 100px;
width: 100px;
background-color: red;
margin-left: 400px;
position: absolute;
}
.mostLeftNote {
height: 100px;
width: 100px;
background-color: red;
margin-left: 300px;
position: absolute;
}
.middleNote {
height: 100px;
width: 100px;
background-color: blue;
margin-left: 600px;
position: absolute;
}
.mostRightNote {
height: 100px;
width: 100px;
background-color: green;
margin-left: 900px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Score: 0</h1>
<div class="middleNote"></div>
<div class="mostLeftNote"></div>
<div class="mostRightNote"></div>
<div class="scoreLineTop"></div>
<div class="scoreLineButtom"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="main.js" charset="utf-8"></script>
</body>
Update
var squareQuantity = [];
function squareCreator(){
var newNote = document.createElement("div");
newNote.className = "newMostLeftNote";
document.body.appendChild(newNote);
squareQuantity.push(this.newNote);
}
var generationSpeed = setInterval(squareCreator, 300);
function fallingMostLeftNote() {
mostLeftNoteMarginTop += 2;
squareQuantity[2].css({
'margin-top': mostLeftNoteMarginTop + 'px'
});
}
Instead of using javascript to update your margin-top, you could use CSS animations. Each new square will animate independently.
Here's an example for your use case:
function addSquare() {
var squaresElement = document.getElementById("squares");
var squareElement = document.createElement("div");
squareElement.className = "square";
squaresElement.append(squareElement);
}
#squares {
display: flex;
}
.square {
height: 100px;
width: 100px;
margin-right: 10px;
background-color: red;
animation-name: fall;
animation-duration: 4s;
animation-timing-function: linear;
}
/* The animation code */
#keyframes fall {
from {margin-top: 0px;}
to {margin-top: 300px;}
}
<button onclick="addSquare()">Add square</button>
<div id="squares"></div>
My approach is giving a css variable while creating divs for transform delay. If you need more complex movements, you can use the same logic for animation instead of transform.
<div class="parent"></div>
.parent {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.lets-try {
flex: 1;
background: #000;
height: 60px;
margin-right: 5px;
margin-left: 5px;
transition: all 0.5s ease-in-out var(--delay);
}
.lets-try.is-falling {
margin-top: 100px;
}
let parent = document.querySelector(".parent");
let numOfSquares = 12;
for (let i = 0; i < numOfSquares ; i++) {
let delay = i * 0.2;
let div = document.createElement('div');
div.setAttribute('class', 'lets-try');
div.setAttribute('style', `--delay:${delay}s`);
parent.appendChild(div);
}
setTimeout(() => {
let items = document.querySelectorAll(".lets-try");
[...items].forEach(item => {
item.classList.add("is-falling")
})
}, 1)
I have these 2 divs and when I click on div 1 I want it to go over the second div, and if I click on Div 1 again I want it to go back to its original position (I want Div 1 to increase its width so it goes over the second Div). Here is my code where I have my 2 divs next to each other. Can anyone point me in the right direction on how to accomplish this? Thanks a lot in advance!
NOTE:
- No jQuery please. I'm trying to accomplish this with javascript and css.
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
}
#wide {
flex: 1;
background: lightgreen;
}
<div id="parent">
<div id="wide">Div 1</div>
<div id="narrow">Div 2</div>
</div>
If you're willing to ditch flex, you can use a combination of float , postion:absolute and transition so that the main div "slides over" the other div
document.querySelector("#wide").onclick = toggleWidth;
function toggleWidth() {
this.classList.toggle("active");
}
#parent {
position: relative;
}
#narrow {
width: 200px;
background: lightblue;
float: right;
}
#wide {
position: absolute;
background: lightgreen;
width: calc(100% - 200px);
transition: width 2s;
}
#wide.active {
width: 100%;
opacity: 0.9;
}
<div id="parent">
<div id="wide">Div 1</div>
<div id="narrow">Div 2</div>
</div>
Note: Changing the opacity is purely optional, I've only done it to further illustrate the "slide over" effect.
Try this
#parent {
display: flex;
}
#narrow {
width: 20vw;
position: absolute;
left: calc(80vw - 10px);
background: lightblue;
z-index: 1;
margin: 0;
}
#wide {
width: calc(80vw - 10px);
background: lightgreen;
transition: all 0.3s ease-out;
}
.wider {
width: 100vw!important;
z-index: 2;
}
<div id="parent">
<div id="wide" onclick="myFunction()">Div 1</div>
<div id="narrow">Div 2</div>
</div>
<script>
function myFunction() {
var element = document.getElementById("wide");
element.classList.toggle("wider");
}
</script>
You can try it using JavaScript.
First, you prepare your CSS:
#narrow {
width: 200px;
transition: 0.32s;
overflow: hidden;
}
#wide.fullwidth ~ #narrow {
width: 0;
opacity: 0;
}
Then, the JavaScript, like this:
document.querySelector("#wide").onclick = changeDivWidth;
var wideFull = false;
function changeDivWidth () {
if (!wideFull) {
this.classList.add("fullwidth");
wideFull = true;
return; // if variable wideFull is false, function stops here
}
wideFull = false;
this.classList.remove("fullwidth");
}
Shorter approach using toggle();
document.querySelector("#wide").onclick = changeDivWidth;
function changeDivWidth () {
this.classList.toggle("fullwidth");
}
Are you looking for something like this : JSFiddle ?
JavaScript (Pure) :
function HideDivOne(){
var wide = document.getElementById("wide");
var narrow = document.getElementById("narrow");
if (wide.style.width == "70%"){
wide.style.width = "100%";
narrow.style.width = "0%";
narrow.style.opacity = "0";
}
else{
wide.style.width = "70%";
narrow.style.width = "30%";
narrow.style.opacity = "1";
}
}
CSS
#parent {
display: flex;
}
#narrow {
width: 30%;
background: lightblue;
height: 20px;
transition: 0.2s;
}
#wide {
width: 70%;
flex: 1;
background: lightgreen;
height: 20px;
transition: 0.2s;
}
HTML
<div id="parent">
<div id="wide" onclick="HideDivOne()">Div1</div>
<div id="narrow" onclick="HideDivTwo()">Div2</div>
</div>
You can change the z-index of the divs based on your desired effect. My suggestion is using jQuery. On click on div 1 add a class to the div that modify the zindex, that is, if the class is not already added, if so, remove it.
I've the below Code.
function showOrHideDiv() {
var e = document.getElementById('pageRightMenu');
var l = document.getElementById('pageLeftMenu');
if (e.style.display == 'block') {
e.style.display = 'none';
l.style.width = '99%';
l.style.transition = "all 2s"; // Standard syntax
l.style.WebkitTransition = "all 2s"
}
else {
l.style.width = '60%';
l.style.transition = "width 2s"; // Standard syntax
l.style.WebkitTransition = "width 2s";
e.style.display = 'block';
}
}
html,
body {
position: fixed;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
.blended_grid {
display: block;
width: 100%;
overflow: auto;
width: 100%;
height: 100%;
/* Webkit 35: */
-webkit-animation: fadeIn 1s linear;
/* Firefox 28, Opera 22, IE 11: */
animation: fadeIn 1s linear;
}
.pageHeader {
background-color: rgba(0, 0, 0, 0.5);
float: left;
clear: none;
height: 20%;
width: 100%;
border: 1px solid black;
}
.pageLeftMenu {
background-color: rgba(0, 0, 0, 0.5);
float: left;
clear: none;
height: 80%;
width: 100%;
border: 1px solid black;
}
.pageRightMenu {
background-color: rgba(0, 0, 0, 0.5);
float: right;
clear: none;
height: 80%;
width: 39%;
border: 1px solid black;
}
<div class="blended_grid">
<div class="pageLeftMenu" id="pageLeftMenu">
<input type="button" value="Click Me!" onClick="showOrHideDiv()" />
</div>
<div class="pageRightMenu" id="pageRightMenu" style="display: none">
This a textF
</div>
</div>
Here as part of my requirements, I've created 2 divs, and in left div there is a button, when I click, the other div will either appear or disappear, and everything is fine, but I want to have a css transition effect when I hide or show the div.
Update:
I'm able to do the transition. I've tried a js function that is doing what I actually require (updated in this question), but when you show the 2nd div, the div appears first below and then beside the other div. How can I fix it, I mean, after the entire transition, the 2nd div should be visible
please run the code snippet to get a better understanding of my issue.
please let me know how can I do this.
Thanks
I recommend using the jQuery fadeOut() function, which animates the opacity to zero and then sets the "display" property to "none" when the animation is finished:
function showOrHideDiv() {
var $e = $(document.getElementById('pageRightMenu'));
var l = document.getElementById('pageLeftMenu');
if ( $e.is(":visible") ) { //safer comparison in case you change things later
l.style.width = '100%';
$e.fadeOut(500); //fade out, taking 500ms
} else {
l.style.width = '60%';
$e.fadeIn(500); //fade in, taking 500ms
}
}
Here's how you do it:
Make this containing element a flexbox using display: flex
Give the pageLeftMenu a "fixed" width using flex: 0 0 auto, which means the width will be taken from the width property (and therefore animated)
Give the pageRightMenu a "flexible" width using flex: 1 1 0, which means it will take up all the remaining space in the parent not used by pageLeftMenu.
The example below shows the effect. Check out this guide for more on flexbox: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
function showOrHideDiv() {
var e = document.getElementById('pageRightMenu');
var l = document.getElementById('pageLeftMenu');
if (e.style.display == 'block') {
e.style.display = 'none';
l.style.width = '99%';
l.style.transition = "all 2s"; // Standard syntax
l.style.WebkitTransition = "all 2s"
}
else {
l.style.width = '60%';
l.style.transition = "width 2s"; // Standard syntax
l.style.WebkitTransition = "width 2s";
e.style.display = 'block';
}
}
html,
body {
position: fixed;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
.blended_grid {
display: flex; //instead of display: block
width: 100%;
overflow: auto;
width: 100%;
height: 100%;
/* Webkit 35: */
-webkit-animation: fadeIn 1s linear;
/* Firefox 28, Opera 22, IE 11: */
animation: fadeIn 1s linear;
}
.pageHeader {
background-color: rgba(0, 0, 0, 0.5);
float: left;
clear: none;
height: 20%;
width: 100%;
border: 1px solid black;
}
.pageLeftMenu {
background-color: rgba(0, 0, 0, 0.5);
float: left;
clear: none;
height: 80%;
width: 100%;
flex: 0 0 auto; //use the width property to determine width
border: 1px solid black;
}
.pageRightMenu {
background-color: rgba(0, 0, 0, 0.5);
float: right;
clear: none;
height: 80%;
flex: 1 1 0; //use up all remaining space
border: 1px solid black;
}
<div class="blended_grid">
<div class="pageLeftMenu" id="pageLeftMenu">
<input type="button" value="Click Me!" onClick="showOrHideDiv()" />
</div>
<div class="pageRightMenu" id="pageRightMenu" style="display: none">
This a textF
</div>
</div>
I have a container with a fixed width and overflow: auto; set.
It contains multiple items (display: inline-block;), also with fixed dimensions.
So if the container has enough children, the items will wrap around and create a grid-like pattern.
Now I dynamically remove children from the beginning and want to animate the position change of the items that are filling up the freed space and moving up from the start of a line to the end of the line above.
var counter = 1;
document.getElementById("additem").onclick = function() {
var item = document.createElement("div");
item.innerText = counter;
counter++;
document.getElementById('container').appendChild(item);
}
document.getElementById("removeitem").onclick = function() {
document.getElementById('container').removeChild(
document.getElementById('container').children[0]
);
}
#container {
width: 280px;
overflow: auto;
border: 1px solid red;
padding: 5px;
text-align: center;
}
#container > div {
width: 80px;
height: 90px;
border: 1px solid green;
margin: 5px;
display: inline-block;
}
<button id="additem">add item</button>
<button id="removeitem">remove item</button>
<div id="container">
</div>
EDIT: I am also able to use jQuery to accomplish this behaivor.
A reasonably clean solution is to use an inline style that sets the removed element's opacity to 0, accompanied by a transition and a setTimeout timed to run as soon as the transition finishes, effectively fading out the element and then sliding everything else into place. Here's a quick snippet I put together:
var counter = 1;
document.getElementById("additem").onclick = function() {
var item = document.createElement("div");
item.innerText = counter;
counter++;
document.getElementById('container').appendChild(item);
}
document.getElementById("removeitem").onclick = function() {
document.getElementById('container').children[0].setAttribute('style', 'opacity: 0');
window.setTimeout(function() {
document.getElementById('container').removeChild(
document.getElementById('container').children[0]
)
}, 300);
}
#container {
width: 280px;
overflow: auto;
border: 1px solid red;
padding: 5px;
text-align: center;
}
#container>div {
width: 80px;
height: 90px;
border: 1px solid green;
margin: 5px;
display: inline-block;
transition: opacity 0.3s;
}
<button id="additem">add item</button>
<button id="removeitem">remove item</button>
<div id="container">
</div>