Why my menu toggle is not smooth transition? I've added transition 200ms and it doesn't work at all. How can I fix this?
#sidebar-container2
min-height: 100vh
width: 80px
display: none
transition: 200ms
#sidebar-container
min-height: 100vh
methods: {
sidebar() {
var menu = document.querySelector('#sidebar-container');
var menuSmall = document.querySelector('#sidebar-container2');
menuSmall.style.display = "block";
menu.style.display = "none";
},
openbar() {
var menu = document.querySelector('#sidebar-container');
var menuSmall = document.querySelector('#sidebar-container2');
menuSmall.style.display = "none";
menu.style.display = "block";
}
You can't do transitions with display, however you can do so with opacity and visibility: Transitions on the CSS display property
Related
So I made a navbar with animation when I scoll down. If I scroll lower the javascript overwrites the css.
I cannot upload the backgrounds but codepen:
Js:
//line animation
document.querySelector(':root').style.setProperty('--contwidth',$(".container").width()+'px');
//line animation end
//navbar
$(function navscroll() {
$(window).on("scroll", function() {
const navline = document.querySelector('.navline');
const header = document.querySelector('header');
if($(window).scrollTop() >= 100) {
navline.style.width = '100%';
navline.style.backgroundColor = 'var(--sec-transparent-color)';
header.style.backgroundColor = 'var(--bg-transparent-color)';
} else {
navline.style.width = $(".container").width()+'px';
navline.style.backgroundColor = 'var(--text-color)';
header.style.backgroundColor = 'transparent';
}
});
});
//navbar end
//scroll top
$(document).ready(function(){
$(window).scrollTop(0);
});
CSS
.navline {
background-color: #fff;
bottom: 0;
height: 0.1rem;
width: var(--contwidth);
transition: all 0.5s ease;
margin: auto;
}
:root{
--bg-color: #030303;
--bg-transparent-color:rgba(0,0,0,0.93);
--text-color: #E8E8E8;
--main-color: #B71A24;
--sec-color:#dd003f;
--sec-transparent-color: rgba(221,0,63,0.93) !important;
--contwidth: x;
}
Codepen
The problem is that I'm using a function to roll back the site to top after refreshing but if I refresh it the css loads in first then the javascript overwrites the css so my white line changes to red then after it reaches the top it become white again
I am sitting with a project in need of an overlay which fades out when hovered upon and goes to display: none (not visibility: hidden, it does need to be display: none).
The setup is a big confusing, but I will try to explain it:
The overlay comes up when I hover a menu point under my mega menu. When I move the cursor to the overlay it should naturally dissapear and the menu close.
This works very well with this code:
var element = document.getElementById("overlayed");
function mouseOver() {
element.classList.add("mystyle");
setTimeout(function() {
element.classList.remove("mystyle");
}, 500);
}
push {
position: absolute;
top: 50%;
}
.overlayerstwo {
position: fixed;
width: 100%;
top: 30%;
left: 0;
right: 0;
bottom: 0;
background: #111;
opacity: 0.5;
z-index: 2;
display: block;
visibility: visible;
}
.mystyle {
display: none;
animation-name: fadeOut;
animation-duration: .5s;
}
#keyframes fadeOut {
0% {
opacity: .5
}
100% {
opacity: 0;
}
}
.mystyler {
display: none;
}
<h1>Here is something. Overlay comes back when hovering me!</h1>
<div class="overlayerstwo" id="overlayed" onmouseover="mouseOver()"></div>
<div class="push">
<p>Here is an item being overlayed</p>
</div>
With this setup the overlay dissapears right away. I am trying to merge it with the fadeOut keyframe animation before it goes black. I have tried different tactics, like adding a second timeout event but all it does is loop through and end up showing the overlay permanently after.
So the order I want to achieve is as follows:
Add a class that fires the keyframe animation fadeOut for .5 sec
Remove keyframe animation class
Add display: block class
Remove display: block class (essentially resetting it, so you can get the overlay up again by hovering its triggerpoint)
So my question is, how do I get all of these to fire every time I hover over the overlay?
One of the things I tried was this:
var element = document.getElementById("overlayed");
element.classList.add("mystyle");
setTimeout(function(){
var element = document.getElementById("overlayed");
element.classList.remove("mystyle");
}, 500);
setTimeout(function(){
var element = document.getElementById("overlayed");
element.classList.add("mystyletwo");
}, 500);
setTimeout(function(){
var element = document.getElementById("overlayed");
element.classList.remove("mystyletwo");
}, 510);
With the css
.mystyle{
animation-name: fadeOut;
animation-duration: .5s;
}
.mystyletwo{
display: block;
}
Which did not work. I hope someone can help me figure out how to get it to work!
if the timeline will be like this: visible -> hover -> animation -> opacity to 0 -> display: none
using CSS with JS logic:
element.addEventListener("mouseover", function() {
element.style.opacity = "0";
element.style.transition = "all 0.3s";
// when finish the animation then call display none
setTimeout(function() {
element.style.display = "none";
}, 300); // put the same number (milliseconds) of duration of transition (or more, not less)
});
using this method you don't need to complex your code...
the trick really is because we use element.style
that is only put the CSS, but technically...
if there is a transition Javascript don't know it,
so it will run the setTimeout() directly after adding styles,
so now CSS will do the animation but javascript will quietly continue the code (which in our case, says that after 300 seconds add display: none;)
I have an alert box that I want to use sessionStorage so that it only appears once. When the user clicks to close the alert, I want the box to disappear (display:none) but fade-out.
I read that you have to use two different functions - one that is activated when clicked and starts the transition and another the adds the 'display' style once transitioned. However, I can't get that to work:
<style>
.ddAlert {
padding: 20px;
box-sizing: border-box;
background-color: #f0ad4e;
color: #fff;
opacity: 1;
transition: opacity 1s;
}
.hide {
opacity: 0;
display: none;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
let dismissed = sessionStorage.getItem("dismissed");
let alertDiv = document.getElementById("alert");
let dismissButton = document.getElementById("dismiss");
if (!dismissed) {
alertDiv.classList.remove("hide");
}
alertDiv.addEventListener("click", function() {
this.style.display = "block";
}.bind(alertDiv));
alertDiv.addEventListener("transitionend", function() {
if (this.className == "hide") {
this.style.display = "none";
}
sessionStorage.setItem("dismissed", true);
}.bind(alertDiv));
});
</script>
<div class="ddAlert hide" id="alert">
SOME ANNOYING ALERT HERE!
<button type="button" id="dismiss">X</button>
</div>
You are on the right track. Instead of listening on click on the alert, use the button as I assume it is there for that reason. When clicking the button the .hide class should be added to the alert. This will start the transition from opacity: 1; to opacity: 0;.
I suggest that instead of using inline-styles, that you stick to classes. Inline styles are hard to overwrite and prevents you from utilizing the full power of CSS. So I've added some classes in there to help you out.
Try out the example below.
<div class="ddAlert hidden" id="alert">
SOME ANNOYING ALERT HERE!
<button type="button" id="dismiss">X</button>
</div>
.ddAlert {
display: block;
transition: opacity 1s;
}
.hide {
opacity: 0;
}
.hidden {
display: none;
}
document.addEventListener("DOMContentLoaded", function() {
let dismissed = sessionStorage.getItem("dismissed");
let alertDiv = document.getElementById("alert");
let dismissButton = document.getElementById("dismiss");
if (!dismissed) {
alertDiv.classList.remove("hidden");
}
dismissButton.addEventListener("click", function() {
alertDiv.classList.add("hide");
});
alertDiv.addEventListener("transitionend", function({ target }) {
if (target.classList.contains("hide")) {
target.classList.add("hidden");
}
sessionStorage.setItem("dismissed", true);
});
});
This answer greatly lends from this SO question titled CSS3 Transition - Fade out effect which notes
When showing the element (by switching to the visible class), we want
the visibility:visible to kick in instantly, so it’s ok to transition
only the opacity property. And when hiding the element (by switching
to the hidden class), we want to delay the visibility:hidden
declaration, so that we can see the fade-out transition first. We’re
doing this by declaring a transition on the visibility property, with
a 0s duration and a delay.
I chose not to mark this question as a duplicate because it also involves the transitionend event. Additionally, I've focused only on the essence of the transition, with a minimal illustration.
The crucial element is the .dismissed-saved class.
let alertDiv = document.getElementById("alert");
let dismissButton = document.getElementById("dismiss");
dismissButton.addEventListener("click", function() {
// kick in the transition
alertDiv.classList.add("dismissed-saved");
// *this is where state should be committed
});
alertDiv.addEventListener("transitionend", function({
target
}) {
if (target === alertDiv) {
// clean up and show a nifty text message illustrating the event handler.
target.classList.add("hidden");
target.classList.remove("dismissed-saved");
document.getElementById("dismissed").classList.remove('hidden');
}
});
.ddAlert {
padding: 20px;
box-sizing: border-box;
background-color: #f0ad4e;
color: #fff;
opacity: 1;
}
.hidden {
display: none;
}
.dismissed-saved {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
<div class="ddAlert" id="alert">
SOME ANNOYING ALERT HERE!
<button type="button" id="dismiss">X</button>
</div>
<div id="dismissed" class="hidden">
Dismissed!
</div>
Good luck!
I have some code for slider:
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2500);
}
CSS:
.mySlides {
display:none;
width: 100%;
height: 100%;
}
.w3-animate-right{
position:relative;
-webkit-animation:animateright 0.9s;
animation:animateright 0.9s;
}
#-webkit-keyframes animateright{
from{right:-700px; display: none;} to{right:0; display: block;}
}
#keyframes animateright{
from{right:-700px; display: none;} to{right:0; display: block;}
}
Now as you see from css image is coming from -700px because slider width is 700px But I am trying to make it display:none for image parts that are not inside the slider frame. I caan do it by putting invisible "walls" next to slider by making it with bigger z index and to slide image under it. But I want to do it without that if it is possible. I will add some paint pic how I would like it to be...
img
The best practice for this is to use the overflow: hidden; css attribute to keep all content outside a div hidden.
More information can be found on this page.
You can create a CSS carousel using overflow: hidden. The exact structure can be found, for example, here:
https://dl.dropboxusercontent.com/u/2629908/sandbox/fluid-css-carousel/index.html
Thanks in advance for your support... I am trying to make a simple slide out navigation
So without any experience in javascript and after 2 days trying to find a SIMPLE solution for a slideout nav I was only able to come across some scripts that were to big… some were 20kb or more or two complicated to implement.
I believe that simplicity is the ultimate sophistication and I knew there should be a better way so after many hours trying... I was able to come up with this solution witch I got from different sources.
<script>
var slider = document.querySelector('.slider');
var overlay = document.querySelector('.overlay');
function openSlide() {
if (slider.classList.contains('closed')) {
slider.classList.remove('closed');
slider.classList.add('open');
overlay.classList.remove('no-display');
} else {
slider.classList.remove('open');
slider.classList.add('closed');
overlay.classList.add('no-display');
}
}
function closeSlide() {
slider.classList.remove('open');
slider.classList.add('closed');
overlay.classList.add('no-display');
}
</script>
My questions are...
How can I improve my code? (without making it to complicated to understand- at least for me)
Is there a way to use a transition effect in the Visibility Property in .overlay from "none" to "block" ?
You can see see an example here...
https://jsfiddle.net/8na6t0dg/2/
Thank you for the help.
If you had only toggle slide button then you could just use this code:
var slider = document.querySelector('.slider');
var overlay = document.querySelector('.overlay');
var opened = false;
function toggleSlide() {
if (!opened) {
slider.classList.remove('closed');
slider.classList.add('open');
overlay.classList.remove('no-display');
} else {
slider.classList.remove('open');
slider.classList.add('closed');
overlay.classList.add('no-display');
}
opened = !opened;
}
And there is no way to use transition on this property. Changing the opacity immediately after a timeout is a good solution:
overlay.classList.add('no-display');
setTimeout(function(){
overlay.style.opacity = '1';
},0);
I've tried to make this as simple as I could for you. This strategy uses css transforms to show and hide the slideout.
// --------------------------
// Initialize the slideout and return a function that when called
// toggles the slideout
// --------------------------
var toggleSlideShow = (function(slideOutId) {
var mySlideOut = document.getElementById(slideOutId);
// --------------------------
// utility to toggle the required classes to animate the slideout
// --------------------------
var _toggle = function() {
mySlideOut.querySelector(".mainOverlay").classList.toggle("slideOutShow");
mySlideOut.querySelector(".slideOutContainer").classList.toggle("slideOutShow");
};
// --------------------------
// --------------------------
// add handler to close slideout on overlay click
// --------------------------
mySlideOut.querySelector(".mainOverlay").addEventListener("click", function() {
if (this.classList.contains("slideOutShow")) { _toggle(); }
});
// --------------------------
return _toggle;
})("slideOut1");
// --------------------------
// --------------------------
// add handler to toggle slideout on button click
// --------------------------
document.getElementById("slideToggler").addEventListener("click", function() {
toggleSlideShow();
});
// --------------------------
.mainContainer {
margin: 1em;
background-image: url("https://s-media-cache-ak0.pinimg.com/736x/05/84/44/058444b369252478964babaf2361fb15.jpg");
background-size: cover;
/* important styles */
position: relative;
overflow: hidden;
}
.mainOverlay {
min-height: 500px;
background-color: #000;
/* important styles */
opacity: 0;
transition: opacity .5s ease;
}
.slideOutContainer {
position: absolute;
top: 1em;
width: 200px;
min-height: 50px;
background-color: aliceblue;
transition: transform .5s ease;
transform: translateX(-200px);
}
.slideOutContainer.slideOutShow { transform: translateX(0px); }
.mainOverlay.slideOutShow { opacity: 0.5; }
<button id="slideToggler">toggle</button>
<div id="slideOut1" class="mainContainer">
<div class="mainOverlay"></div>
<div class="slideOutContainer">
<div style="text-align: center;">contents of slide</div>
</div>
</div>
For me, the best approach for the slideout nav menu is to place it off the screen. Like this:
These are the things that you need to keep in mind:
Place the sidemenu off the screen
Use absolute position (or fixed, depending on your requirements)
transition the left css property.
Use javascript only for toggle the class or css rule that change the left property.
Here's a very simple demo:
http://codepen.io/sospedra/pen/ezNWgW