Develop Reference

CSS Transition on Class Change

I am trying to transition width property when certain class is added or removed to element using JavaScript. Transition works fine if I try to change property on :hover, but it won't work if I try to transition it by adding or removing class. What am I doing wrong?
function activate(number) {
var bottom1 = document.getElementById("bottom-1");
var bottom2 = document.getElementById("bottom-2");
if (number === 1) {
bottom1.classList.add("active");
bottom2.classList.remove("active");
} else {
bottom2.classList.add("active");
bottom1.classList.remove("active");
}
}
body {
display: flex;
}
.container {
position: relative;
}
.bottom-1 {
position: absolute;
bottom: 0px;
right: 0px;
height: 2px;
background-color: red;
transition: width 1s ease;
}
.bottom-2 {
position: absolute;
bottom: 0px;
left: 0px;
height: 2px;
background-color: red;
transition: width 1s ease;
}
.active {
width: 100%;
}
<div class="container">
<button onclick="activate(1)">Button 1</button>
<div id="bottom-1" class="bottom-1 transition"></div>
</div>
<div class="container">
<button onclick="activate(2)">Button 2</button>
<div id="bottom-2" class="bottom-2 transition"></div>
</div>

you need to define width in button CSS before transition it:
function activate(number) {
var bottom1 = document.getElementById("bottom-1");
var bottom2 = document.getElementById("bottom-2");
if (number === 1) {
bottom1.classList.add("active");
bottom2.classList.remove("active");
} else {
bottom2.classList.add("active");
bottom1.classList.remove("active");
}
}
body {
display: flex;
}
.container {
position: relative;
}
.bottom-1 {
position: absolute;
bottom: 0px;
right: 0px;
height: 2px;
width: 0%;
background-color: red;
transition: width 1s ease;
}
.bottom-2 {
position: absolute;
bottom: 0px;
left: 0px;
height: 2px;
width: 0%;
background-color: red;
transition: width 1s ease;
}
.active {
width: 100%;
}
<div class="container">
<button onclick="activate(1)">Button 1</button>
<div id="bottom-1" class="bottom-1 transition"></div>
</div>
<div class="container">
<button onclick="activate(2)">Button 2</button>
<div id="bottom-2" class="bottom-2 transition"></div>
</div>

Only one out of five divs transitions correctly

After clicking the button the elements should move to their second positions. It only seems to work with the last element where I used !important which I don't want to use. Here is my code:
let ruch = document.querySelectorAll('.menu');
let myArray = Array.from(ruch);
let btn = document.getElementById('btn');
btn.addEventListener('click', function () {
myArray.forEach(function (item) {
if (item == myArray[0]) {
item.classList.add('run1');
} else if (item == myArray [4]) {
item.classList.add('run2');
} else {
item.classList.add('run');
}
});
});
body {
background-color: #302e2e;
font-size:22px;
}
#btn{
position: absolute;
left: 914px;
top: 180px;
}
.wrapper{
position: relative;
width:600px;
margin: 0 auto;
}
.container{
position:absolute;
top:250px;
width:0px;
}
.menu{
padding:5px;
border:1px solid #323232;
width:100px;
height:100px;
background:#46f4a0;
border-radius:20px;
position: absolute;
box-sizing: border-box;
}
.menu:nth-child(2){
left:105px;
}
.menu:nth-child(3){
left:210px;
}
.menu:nth-child(4){
left:315px;
}
.menu:nth-child(5){
left:420px;
}
.run{
opacity: 0;
transition:3s ease-in-out;
z-index: -1;
top:110px;
}
.run1{
opacity: 0;
transition:3s ease-in-out;
z-index: -1;
left:-110px;
}
.run2{
opacity: 0;
transition:3s ease-in-out;
z-index: -1;
left:530px!important;
}
<button id="btn">
Kliknij
</button>
<div class="wrapper">
<div class="container ">
<div class="menu ">About</div>
<div class="menu ">My Projets</div>
<div class="menu ">Some stuff</div>
<div class="menu ">Werid shits</div>
<div class="menu ">Contact</div>
</div>
</div>
Thanks for your help

Like this? (complementary CodePen)
let menuItems = Array.from(document.querySelectorAll(".menu"));
document.getElementById("btn").addEventListener("click", function() {
menuItems[0].classList.add("run1");
menuItems[4].classList.add("run2");
menuItems.slice(1, 4).forEach(function(item) {
item.classList.add("run");
});
});
body {
background-color: #302e2e;
font-size: 22px;
}
#btn {
position: absolute;
left: 914px;
top: 180px;
}
.wrapper {
position: relative;
width: 600px;
margin: 0 auto;
}
.container {
position: absolute;
top: 250px;
width: 0px;
}
.menu {
padding: 5px;
border: 1px solid #323232;
width: 100px;
height: 100px;
background: #46f4a0;
border-radius: 20px;
position: absolute;
box-sizing: border-box;
}
.menu:nth-child(2) {
left: 105px;
}
.menu:nth-child(3) {
left: 210px;
}
.menu:nth-child(4) {
left: 315px;
}
.menu:nth-child(5) {
left: 420px;
}
.menu.run {
opacity: 0;
transition: 3s ease-in-out;
transform: translateY(110px);
}
.menu.run1 {
opacity: 0;
transition: 3s ease-in-out;
transform: translateX(-110px);
}
.menu.run2 {
opacity: 0;
transition: 3s ease-in-out;
transform: translateX(110px);
}
<button id="btn">Kliknij</button>
<div class="wrapper">
<div class="container">
<div class="menu">About</div>
<div class="menu">My Projets</div>
<div class="menu">Some stuff</div>
<div class="menu">Werid shits</div>
<div class="menu">Contact</div>
</div>
</div>
Please also look into your CSS again. You should avoid working with absolute positioning and pixel values only since it will look different on every device.

U need to move transition to '.menu' and it should look like that:transition:3s transform ease-in-out;. And in '.run', '.run1', '.run2' when left replace with: transform: translateX(/*value*/px);. And when top replace with: transform: translateY(/*value*/px);.

JQuery create expanding div on navigation

Take this snippet:
.container {
width: 150px;
height: 100px;
}
.test {
color: white;
background-color: red;
width: 100%;
height: 25%;
transition: height ease 1s;
}
.test:hover {
height: 100%;
}
<div class="container">
<div class="test">Hover Here</div>
</div>
A simple div inside a container which expands to 100% when hovered over. What I am trying to make is very simular to this, but in a navigation menu (similar to http://www.mineplex.com/).
When a user hovers over the container div (not the main box itself) I need the main div to expand from 0% to 100% in height.
I have tried using JQuery to solve this using a ".hovered" class with no luck. How can one code this?
Any help is much appreciated. Thanks!

Here's a demonstration:
Similarities between both the code snippets:
The containers make use of flex display to make a responsive navbar container, with each of its items spanning a width of 20% (which can be adjusted).
Each of the items (with relative positioning) has two sub containers (with absolute positioning), the first being overlay which we're making use for getting the blue transitioning background(z-index:1) and the second which has a fixed text on the front (z-index:2).
Now, the z-index makes sure that the overlay will be transitioned at the back and text will be fixed in the front, another thing to keep in mind is since we're transitioning it from the bottom up, we set the bottom:0 on the overlay class as well as height:0%;.
On hovering , we transition the height from 0% to 100%.
Differences between both the code snippets:
In the first snippet, we're transitioning each item on hover by making use of .items:hover .overlay.
Whereas in the second snippet, we're transitioning every item when the container is hovered instead of individual items by using .container:hover > *.items> .overlay ( ">" is a direct child selector ).
First: Hovering each item individually to expand the overlay.
.container {
width: 100%;
display: flex;
height: 80px;
background: gray;
justify-content: center;
align-items: center;
}
.items {
flex: 0 1 20%;
height: 100%;
margin-right: 5px;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
background: blue;
z-index: 1;
width: 100%;
height: 0%;
bottom: 0;
transition: all 0.5s ease-in-out;
}
.item-text {
position: absolute;
text-align: center;
color: white;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
}
.items:hover .overlay {
height: 100%;
}
<div class="container">
<div class="items">
<div class="overlay"></div>
<div class="item-text">Home</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">About</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Contact</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Other</div>
</div>
</div>
Second: When the user hovers over the container, expanding all the overlays.
.container {
width: 100%;
display: flex;
height: 80px;
background: gray;
justify-content: center;
align-items: center;
}
.items {
flex: 0 1 20%;
height: 100%;
margin-right: 5px;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
background: blue;
z-index: 1;
width: 100%;
height: 0%;
bottom: 0;
transition: all 0.5s ease-in-out;
}
.item-text {
position: absolute;
text-align: center;
color: white;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
}
.container:hover > *.items> .overlay {
height: 100%;
}
<div class="container">
<div class="items">
<div class="overlay"></div>
<div class="item-text">Home</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">About</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Contact</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Other</div>
</div>
</div>

ul{
list-style-type: none;
margin-left: 0;
padding-left: 0;
display: flex;
}
ul li{
border: 1px solid #d3d3d3;
text-align: center;
height: 100px;
width: 100px;
margin-right: 4px;
}
ul li a{
color: #000000;
text-decoration: none;
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul li a:after{
content: '';
position: absolute;
background: lightblue;
left: 0;
bottom: 0;
height: 0%;
width: 100%;
z-index: -1;
}
ul li a:hover:after{
animation: bounce 1s ease-in-out forwards;
}
#keyframes bounce {
0% {height: 0%}
20% { height: 100%}
55% { height: 95%}
100% {height: 100%}
}
<ul>
<li>Lorem, ipsum.</li>
<li>Saepe, asperiores!</li>
<li>Vitae, expedita?</li>
<li>Dicta, quo.</li>
<li>Sed, et.</li>
</ul>

i wrote some code
//html
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
//This is sass
ul {
list-style:none;
background:red;
li {
display:inline-block;
padding:10px;
position:relative;
&:before {
position: absolute;
content: "";
width: 100%;
height: 0%;
left: 0;
bottom: 0;
background:blue;
transition: height ease-in-out 0.5s;
}
a {
z-index:2;
position:relative;
color:white;
}
&:hover {
&:before {
height: 100%;
}
}
}
}

How do I slide up a div off container with moving effect in jquery?

This is my fiddle:
https://jsfiddle.net/XiangXu/rf6tdw4s/17/
<button id="slide">slide it</button>
<div id="slidebottom" class="slide">
<div class="innerTop" id="top">Slide from top</div>
<div class="innerBottom" id="bottom">Slide from bottom</div>
</div>
.slide {
position: relative;
height: 100px;
background-color: yellow;
}
.slide .innerTop {
position: absolute;
top: 0px;
}
.slide .innerBottom {
position: absolute;
bottom: 0px;
}
$("#slide").click(function() {
$("#top").slideToggle();
$("#bottom").slideToggle();
});
The bottom one is no problem which moves down off the container.
But the top one is like there is something erasing it from bottom to top instead of moving it!
How do I move it off the container like the bottom one?

You can't do it with jQuery's .slideUp() and .slideDown() function because it animates height of the element. However you can add class on click and use css transform for styling them.
$("#slide").click(function() {
$("#top, #bottom").toggleClass('hidden');
});
.slide {
position: relative;
height: 100px;
background-color: yellow;
overflow: hidden;
}
.slide .innerTop,
.slide .innerBottom {
transition: transform 0.25s linear;
transform: translateY(0);
}
.slide .innerTop {
position: absolute;
top: 0px;
}
.slide .innerTop.hidden {
transform: translateY(-100%);
}
.slide .innerBottom {
position: absolute;
bottom: 0px;
}
.slide .innerBottom.hidden {
transform: translateY(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="slide">slide it</button>
<div id="slidebottom" class="slide">
<div class="innerTop" id="top">Slide from top</div>
<div class="innerBottom" id="bottom">Slide from bottom</div>
</div>

You can do it with toggling a css class.
Add a class hidden when want to hide it
set position of the elements out of the box making it negative
set overflow:hidden of the container.
Here is a working example:
$("#slide").click(function() {
$("#top, #bottom").toggleClass("hidden"); // toggle CSS class on click
});
.slide {
position: relative;
overflow: hidden; /* setting overflow hidden */
height: 100px;
background-color: yellow;
}
.slide .innerTop {
position: absolute;
top: 0px;
}
.slide .innerBottom {
position: absolute;
bottom: 0px;
}
#top,
#bottom {
transition: 0.25s linear; /* adding animation */
}
#top.hidden {
top: -30px; /* making out of the visible area */
}
#bottom.hidden {
bottom: -30px; /* making out of the visible area */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="slide">slide it</button>
<div id="slidebottom" class="slide">
<div class="innerTop" id="top">Slide from top</div>
<div class="innerBottom" id="bottom">Slide from bottom</div>
</div>

Here is working example,
$("#slide").click(function() {
$("#top").slideToggle();
$("#bottom").slideToggle();
});
$("#slideDown").click(function() {
$("#top").slideDown();
$("#bottom").slideDown();
});
$("#slideUp").click(function() {
$("#top").slideUp();
$("#bottom").slideUp();
});
.slide {
position: relative;
height: 100px;
background-color: skyblue;
}
.slide .innerTop {
position: absolute;
top: 0px;
padding: 8px;
background-color: #acacac;
}
.slide .innerBottom {
position: absolute;
bottom: 0px;
padding: 8px;
background-color: #acacac;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script><button id="slide">slide it</button>
<button id="slideDown">slide Down</button>
<button id="slideUp">slide Up</button>
<div id="slidebottom" class="slide">
<div class="innerTop" id="top">Slide from top</div>
<div class="innerBottom" id="bottom">Slide from bottom</div>
</div>

making a toggle button to change panels

I have two panels at the top of my application and one button at the button. By default only panel one must be visible, but by clicking on the button panel one fades away, and panel two fades in. I created the layout, but I do not know how to achieve it.
$(".panel2").hide();
$(document).ready(function() {
$(".grid-button").on("click", function() {
$(".grid").toggleClass("open close");
});
});
div.app {
margin:50px auto;
width: 400px;
height: 400px;
border-radius:10px;
overflow: hidden;
position: relative;
}
div.app > .blur {
width: 100%;
height: 100%;
background: url(http://goo.gl/0VTd9W);
-webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
position: absolute;
left: 0px;
text-align:center;
color:#fff;
font-size:20px;
}
div.mainSection{
width:100%;
height:85%;
background:rgba(0,0,0,0.5);
top:0;
}
div.dashboard{
width:100%;
height:15%;
background:rgba(255,0,0,0.5);
bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
width: 100%;
Height: 100%;
Background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
}
.grid-button {
background: none;
border: none;
padding: 3px;
width: 100%;
}
.grid {
display: inline-block;
height: 4px;
position: relative;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
content: '';
position: absolute;
background-color: #FFF;
display: inline-block;
height: 4px;
left: 0;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid.open {
background-color: #FFF;
}
.grid.open:after {
top: 10px;
}
.grid.open:before {
top: -10px;
}
.grid.close {
background-color: transparent;
transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
top: 0;
transform-origin: 50% 50%;
}
.grid.close:before {
transform: rotate(135deg);
}
.grid.close:after {
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="blur"></div>
<div class="mainSection">
<div class="panel1">Panel1</div>
<div class="panel2">Panel2</div>
</div>
<div class="dashboard">
<div class="grid-button">
<span class="grid open"></span>
</div>
</div>
</div>
First of all since I did $('.panel2').hide();, in page load first it loads the panel then hides it. How can I make it invisible from the beginning?
Secondly how can I make the panel2 visible only by pressing the button?
And finally is there anyway to add some transitions effects for changing panels?

You may try:
$(".grid-button").on("click", function() {
var visibleObj = $('.mainSection div:visible');
var inVisibleObj = $('.mainSection div:hidden');
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
While for the visibility you need:
<div class="panel2" style="display: none;">Panel2</div&gt
The running snippet:
$(function () {
$(".grid-button").on("click", function() {
var visibleObj = $('.mainSection div:visible');
var inVisibleObj = $('.mainSection div:hidden');
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
});
div.app {
margin:50px auto;
width: 400px;
height: 400px;
border-radius:10px;
overflow: hidden;
position: relative;
}
div.app > .blur {
width: 100%;
height: 100%;
background: url(http://goo.gl/0VTd9W);
-webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
position: absolute;
left: 0px;
text-align:center;
color:#fff;
font-size:20px;
}
div.mainSection{
width:100%;
height:85%;
background:rgba(0,0,0,0.5);
top:0;
}
div.dashboard{
width:100%;
height:15%;
background:rgba(255,0,0,0.5);
bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
width: 100%;
Height: 100%;
Background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
}
.grid-button {
background: none;
border: none;
padding: 3px;
width: 100%;
}
.grid {
display: inline-block;
height: 4px;
position: relative;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
content: '';
position: absolute;
background-color: #FFF;
display: inline-block;
height: 4px;
left: 0;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid.open {
background-color: #FFF;
}
.grid.open:after {
top: 10px;
}
.grid.open:before {
top: -10px;
}
.grid.close {
background-color: transparent;
transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
top: 0;
transform-origin: 50% 50%;
}
.grid.close:before {
transform: rotate(135deg);
}
.grid.close:after {
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="blur"></div>
<div class="mainSection">
<div class="panel1">Panel1</div>
<div class="panel2" style="display: none;">Panel2</div>
</div>
<div class="dashboard">
<div class="grid-button">
<span class="grid open"></span>
</div>
</div>
</div>

To make one of the panels hidden in the first place, I'd use a css class called hidden:
.hidden{
display : none;
}
Which simply makes what it sounds like, hiding the element.
Than, I'd set this class in the HTML decleration:
<div class="panel2 hidden">Panel2</div>
That will hide panel2 on page load, and by that you don't have to hide it using js code.
Than, I'd use a helper css class called panel that stands to be a panel identifier (you can either use the data attribute, or any other way of identifying those elements).
For 5 panels, it would look like this:
<div class="panel panel1">Panel1</div>
<div class="panel panel2 hidden">Panel2</div>
<div class="panel panel3 hidden">Panel3</div>
<div class="panel panel4 hidden">Panel4</div>
<div class="panel panel5 hidden">Pane5</div>
At last, to make this work for any number of panels you want (not necesseraly 2), I'd use a "carousel" effect to toggle the panels visibility, while having a way to keep track with them (adding and removing the hidden class), and use the fadeIn/fadeOut effect. (again, instead of identifying the panels using the panel1,panel2,panel3... classes, you can always use the data attribute (please read more about it in jQuery docs), or in any other way).
var currentPanel = 1;
$(".grid-button").on("click", function() {
$(".grid").toggleClass("open close");
$(".panel"+currentPanel).fadeOut("normal", function(){
$(this).addClass('hidden');
});
currentPanel = currentPanel >= $(".panel").length ? 1 : currentPanel+1;
$(".panel"+currentPanel).fadeIn().removeClass('hidden');
});
Just note that the hidden class actually "looses" it's functionality after the first click, since jQuery changes the display property inline, but I think that it might not be harmful to keep them anyway (it will be easier to track them).
You can see an example here: https://jsfiddle.net/j79y5kdb/3/