Only one out of five divs transitions correctly

Only one out of five divs transitions correctly - javascript

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);.

Related

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>

Hamburger menu button changes to x button

I'm trying to create a hamburger button which turns to x when clicked. Everything is working fine, I just can't make the x sign in a perfect shape. I wanna know how many pixels should I translate the top and bottom bars of the hamburger menus. This is my code:
function toggleMenu() {
y = document.querySelector(".header__hamburger");
y.classList.toggle("click");
}
.bar {
border: solid 2px black;
margin-bottom: 5px;
width: 36px;
transition: 0.5s;
}
.header__hamburger {
display: inline-block;
position: absolute;
right: 0;
padding: 3em;
}
.click .hamburger__bar1 {
transform: rotate(45deg) translate(0, 12px);
}
.click .hamburger__bar2 {
opacity: 0;
}
.click .hamburger__bar3 {
transform: rotate(-45deg) translate(0, -12px);
}
<div class="header__hamburger" onclick="toggleMenu()">
<div class="bar hamburger__bar1"></div>
<div class="bar hamburger__bar2"></div>
<div class="bar hamburger__bar3"></div>
</div>

try this
function toggleMenu() {
y = document.querySelector(".header__hamburger");
y.classList.toggle("click");
}
.bar {
position: absolute;
width: 36px;
height: 3px;
background-color: #000;
transition: 0.5s;
}
.hamburger__bar1{
top: -8px;
}
.hamburger__bar3{
top: 8px;
}
.header__hamburger {
display: inline-block;
position: absolute;
right: 0;
padding: 3em;
}
.header__hamburger > div{
position: relative;
}
.click .hamburger__bar1 {
transform: rotate(-45deg);
top: 0;
}
.click .hamburger__bar2{
opacity: 0;
}
.click .hamburger__bar3{
transform: rotate(45deg);
top: 0;
}
<div class="header__hamburger" onclick="toggleMenu()">
<div>
<div class="bar hamburger__bar1"></div>
<div class="bar hamburger__bar2"></div>
<div class="bar hamburger__bar3"></div>
</div>
</div>

jquery img class overlay

I'm trying to add red overlay on my image-box class, but I can't get the result because:
new overlay class replaces the old one, and I only get red background.
I need the new class in addition to, not instead of the old one.
This is what I have tried so far:
$(function($) {
$(document).on('click', '.wrapper', function(event) {
var target = $(event.target).closest('.wrapper');
target.find('.image-box').addClass("overlay");
});
});
.image-box {
height: 300px;
width: 100%;
padding-right: 0px;
padding-left: 0px;
background-position: center;
background-color: #4D4E56;
}
.overlay{
background-color:rgba(86, 61, 124, 0.55);
transition: 0.5s;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
height:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image-box"></div>
</div>

You may use :after to add overlay. Check the updated Code.
$(function($) {
$(document).on('click', '.wrapper', function(event) {
var target = $(event.target).closest('.wrapper');
target.find('.image-box').addClass("overlay");
});
});
.image-box {
height: 300px;
width: 100%;
padding-right: 0px;
padding-left: 0px;
background-position: center;
background-color: #4D4E56;
position: relative
}
.image-box:after {
opacity: 0;
background-color: rgba(86, 61, 124, 0.55);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
transition: opacity 5s;
}
.overlay:after {
opacity: 1;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image-box"></div>
</div>

If I understand you better below is the code snippet.
$(function($) {
$(document).on('click', '.wrapper', function(event) {
$(this).find('.image-box').addClass("overlay");
});
});
.image-box {
height: 300px;
width: 100%;
padding-right: 0px;
padding-left: 0px;
background-position: center;
background-color: #4D4E56;
}
.overlay{
/*background-color:rgba(86, 61, 124, 0.55);*/
background-color:rgba(255, 0, 0, 1);
transition: 0.5s;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
height:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="wrapper">
<div class="image-box"></div>
</div>

Have you tried to change the .overlay & image-box property
.image-box{
/* add position:relative */
}
.overlay{
position:absolute; background-color:red; filter:alpha(opacity=50); opacity: 0.8; height: 100%; width: 100%; opacity: 1; z-index: 9; position: absolute; top: 0; opacity: 0.5;transition: 0.5s;
}
While clicking on image-box, it will give you the overlay over the image-box

CSS suppress element

I have a simple one-page site with to link-boxes at the end of the site.
This is my HTML:
<div class="link-wrapper">
<div class="link-box">
Galerie
</div>
<div class="link-box">
Shop
</div>
</div>
This is my CSS:
.link-wrapper {
height: 40%;
width: 100%;
}
.link-box {
height: 100%;
width: 50%;
float: left;
}
After hovering one of the boxes, the box should get larger and push the other box out of the viewport. Like this:
Is there a way to solve this with CSS or do I have to use Javascript?

We can't select previous sibling with css so it is possible with JavaScript or some framelike jQuery.
$(function() {
$('.link-box.left').hover(
function() {
$('.link-box.right').toggleClass('right-out');
}
);
$('.link-box.right').hover(
function() {
$('.link-box.left').toggleClass('left-out');
}
);
});
html,
body {
height: 100%;
}
body {
margin: 0;
}
.link-wrapper {
overflow: hidden;
position: relative;
height: 40%;
width: 100%;
}
.link-box {
transition: width 0.4s linear, right 0.4s linear, left 0.4s linear;
position: absolute;
background: #0f0;
height: 100%;
width: 50%;
left: 0;
}
.link-box.right {
background: #f00;
left: auto;
right: 0;
}
.link-box.left-out {
left: -50%;
}
.link-box.right-out {
right: -50%;
}
.link-box:hover {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="link-wrapper">
<div class="link-box left">
Galerie
</div>
<div class="link-box right">
Shop
</div>
</div>

A pure css solution:
<div class="link-wrapper">
<div class="link-box" id="toGallery">
Galerie
</div>
<div class="link-box" id="toShop">
Shop
</div>
.link-wrapper {
height: 40%;
width: 100%;
transition: all 1s ease-in
}
.link-wrapper:hover {
margin-left: -10%
}
.link-box {
height: 100%;
width: 40%;
float: left;
transition: all 1s ease-in
}
div#toGallery:hover {
margin-left:10%;
margin-right:10%;
}
div#toShop:hover {
margin-left:10%;
}
https://jsfiddle.net/405p5o0o/1/

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/

Develop Reference

JavaScript is the programming language of the Web.

Only one out of five divs transitions correctly - javascript

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);.

Related

CSS Transition on Class Change

Hamburger menu button changes to x button

jquery img class overlay

CSS suppress element

making a toggle button to change panels

Categories

Resources