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>
Related
There are similar questions like this and this, but don't address this situation.
The goal is to slide a menu onto the screen with CSS translation when its parent is shown. However, showing the parent then applying the CSS class to trigger the translation happens instantly instead of over time. Effectively, there's no animation.
JavaScript could be used to slide the child element onto the screen, but the goal is to keep as much of the animation logic in CSS.
Setting the opacity to 0 doesn't work because we need the menu and its parent to not take any space or be part of the layout.
Codepen: https://codepen.io/Crashalot/pen/YzXmjYj
function toggleSidebar() {
$("#sidebar").toggleClass("show");
}
$("#button").on("click", function() {
toggleSidebar();
});
body {
margin: 0;
padding: 0;
}
#button {
position: fixed;
top: 0;
left: 200px;
width: 150px;
height: 50px;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
z-index: 8;
cursor: pointer;
}
#sidebar {
display: none;
}
#sidebar.show {
display: block;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: red;
z-index: -1;
}
.menuBox {
width: 200px;
height: 100vh;
background: blue;
transition: 0.3s ease-in-out;
transform: translate(-100%);
}
#sidebar.show .menuBox {
transform: translate(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
<div class="overlay"></div>
<div class="menuBox"></div>
</div>
<div id="button">CLICK ME</div>
You can't animate display: none; Set opacity to 0 and then 1 on toggle class. Here's the CodePen for you. ;)
I added a button for the toggle event. Let me know if you need any more help!
enter link description here
$(".btn").on("click", toggleSidebar);
function toggleSidebar() {
$("#sidebar").toggleClass("show");
}
body {
margin: 0;
padding: 0;
}
#sidebar {
opacity: 0;
transition: all 300ms ease-in-out;
}
#sidebar.show {
display: block;
opacity: 1;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: red;
z-index: -1;
}
.menuBox {
width: 200px;
height: 100vh;
background: blue;
transition: 300ms ease-in-out;
-webkit-transform: translate(-100%);
}
#sidebar.show .menuBox {
-webkit-transform: translate(0);
}
.btn {
position: absolute;
top: 10px;
left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
<div class="overlay"></div>
<div class="menuBox"></div>
</div>
<button class="btn">Click</button>
You need to consider an animation. The animation will run automatically when the element appear on the screen
function toggleSidebar() {
$("#sidebar").toggleClass("show");
}
$("#button").on("click", function() {
toggleSidebar();
});
body {
margin: 0;
padding: 0;
}
#button {
position: fixed;
top: 0;
left: 200px;
width: 150px;
height: 50px;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
z-index: 8;
cursor: pointer;
}
#sidebar {
display: none;
}
#sidebar.show {
display: block;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: red;
z-index: -1;
}
.menuBox {
width: 200px;
height: 100vh;
background: blue;
transform: translate(-100%);
animation: show 0.3s ease-in-out forwards;
}
#keyframes show {
to {
transform: translate(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar">
<div class="overlay"></div>
<div class="menuBox"></div>
</div>
<div id="button">CLICK ME</div>
updating display to a value other than none will start all animations applied to the element by the animation-name property, as well as all animations applied to descendants with display other than none. ref
I think you should define the action for your function called. When load page or on click like below:
$(document).ready(function () {
$('#sidebar').on('click', function () {
$(this).toggleClass('show');
});
});
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);.
i am trying to create a web presentation and wanted to a add a little Animation of 2 Halfes which moves up and down on a Click (which works so far) but i also want them to stay there after the click.
standard looking version http://img5.fotos-hochladen.net/uploads/3ozt9kfyr08.jpg
0.75 seconds after the click on the logo in the middle http://img5.fotos-hochladen.net/uploads/2lpdyoktws6.jpg
after the animation http://img5.fotos-hochladen.net/uploads/18cd9xfjg21.jpg
This is my Code for that: HTML
<body>
<a href="#" id="btn_logo" onclick="return false"> <div id="animation">
<div id="logo"> </div>
<div id="up"> </div>
<div id="down"> </div>
</div></a>
and then made the animation with:
#btn_logo:active #up
and
#btn_logo:active #down
How could i make the animation toggled after it ended?
What you should do is have it animate on a CSS class, and then simply add or remove a CSS class on click.
Like so: https://jsfiddle.net/8troo8bw/1/
(or so with your exact html): https://jsfiddle.net/8troo8bw/2/
The key here being the animation:
#up, #down {
background: #000;
position:absolute;
right:0;
left:0;
width:100%;
height:25px;
transition: top 0.25s;
}
#up.moveUp {
top: 25px;
}
#down.moveDown {
top: 100px;
}
And the relevent JS to add the class:
$('#click').on('click', function(){
$('#up').addClass('moveUp');
$('#down').addClass('moveDown');
});
Do something like this:
$(document).ready(function(){
$('#animation').on('click', function() {
$('.up,.down').addClass('animated');
});
});
#animation {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: yellow;
}
.logo {
position: relative;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
background: red;
border-radius: 50%;
margin: 0 auto;
}
.up {
position: absolute;
top: 0;
right: 0;
bottom: 50%;
left: 0;
background: green;
}
.down {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
background: blue;
}
.up.animated {
bottom: 100%;
top: -50%;
transition: all 1s linear;
}
.down.animated {
top: 100%;
bottom: -50%;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="animation">
<div class="up"> </div>
<div class="down"> </div>
<div class="logo"> </div>
</div>
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>
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/