I'm working in an Angular 9 app and I need to make an accordion menu. Everything works fine with my code except for the animation of the sub menus. I want to animate the content of a sub-menu item when display is change from'block' to 'none' and also animate it when is changing from 'block' to 'none'.
here is a couple of examples of what I need
https://codyhouse.co/demo/multi-level-accordion-menu/index.html
https://primer.fusepx.com/angular/
I also want to keep the code structure as much as possible. I just really need the content animation
Here is an stackblitz example with my code.
https://stackblitz.com/edit/angular-ivy-t6rbdp
Try this
.content {
padding: 10px;
background-color: blue;
height: 0 !important;
overflow-y: hidden;
transition: height 0.5s ease-in-out;
}
.content-open {
opacity: 1;
height: 100px !important;
}
As display which doest represent numeric values you cant do transition on that. So use properties like height.
Related
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 1 year ago.
I'm creating a hamburger menu and I'm using JavaScript to handle the ON and OFF of the menu. Here's how my code looks like:
const hamburger_menu = document.querySelector('.hamburger-menu');
const side_nav = document.querySelector('.side-nav');
hamburger_menu.addEventListener('click', () => {
side_nav.classList.toggle('open');
})
When the hamburger menu is clicked, the script will toggle the 'open' class on the hidden menu. I want the menu to have a transition effect when appearing. Here's how my SCSS looks like:
.side-nav {
background: $black;
display: none;
padding: 5rem;
position: absolute;
top: 10.4rem;
right: 0;
bottom: -1.6rem;
left: 0;
opacity: 0;
transition: all .3s ease;
z-index: 100;
&.open {
display: block;
opacity: 1;
}
}
Somehow the transition effect is not working. Is there anyone knows the reason?
Transition will never work on display property. It works on properties like width, height, opacity etc.
In your particular case, what you can do is, use height or width to control this animation.
If your sidebar will appear from the left then you will need to set the initial width to 0 and then set the width to the actual width on click. Like this:
.side_nav {
width: 0;
transition: width 1s;
&.open {
width: 200px;
}
}
Now when the open class will attach to your hamburger, it will animate the width.
replacement Display property with Visibility can help you.
visibility : hidden => visible.
Because you are switching between display: block; and display: none;.
It doesn't trigger the transition.
Instead you can hide/show by manipulating the height, opacity or width from 0 to a set value. There are most likely even more approaches other than height, opacity and width. The transition would then be triggered from value 0 to value x.
The page in question:
http://rainbowdoge.000webhostapp.com
The situation:
I have two buttons in the nav menu on the left side.
The upper one contains a hitbox (black for testing purposes), and an image of a rainbow. The image is changing the opacity on hover.
CSS code for that:
.icon {
opacity: 0.6;
backface-visibility: hidden;
transition: opacity 0.3s ease-in-out;
}
.iconHitbox:hover .icon {
opacity: 1;
cursor: pointer;
}
There is also an iframe on the page. The iconHitbox changes the iframe's source on click.
The problem:
If I hover over the top half of the button, the opacity doesn't change, as if a hover isn't even detected.
The solution I could think of:
I thought that maybe something else is getting in the way, but no, the setSrc() function works when I click on the upper half of the button.
This is happening because your #test1, #test2, and #test3 elements are being positioned half way over the rainbow circle. You'll need to move them out of the way.
The div with the id "test3" is overlapping with your icon. You can see it in the dev tools of your browser.
You have absolute set. If you remove absolute then adjust positioning you'll be good.
try:
#mainPageIcon {
background-color: black;
position: relative;
top: 25px;
}
.iconHitbox {
height: 8vh;
width: 8vh;
}
I've implemented a CSS solution to animate a style that is set inline with the guidance from CSS-Tricks. Also used help from SO to have the text blend with CSS
I have the animation of the label going both ways (on load and reset) but the progress bar itself immediately goes to Zero
The width of the div gets set inline like this:
<div class="progress-black" ng-style="{width:progress}"></div>
And the onload animation is simple
.progress-black {
background: black;
animation: progress-bar .5s linear;
z-index: 2;
}
#keyframes progress-bar {
0% { width: 0; }
}
Here is my jsfiddle
It seems like #keyframe animations need a 100% value, which is set dynamically, so not sure how to express that in CSS.
My particular app has the ability for a user to click 'reset'. Is there a way to have the animation happen back to 0?
You have few problems in your code and there is two solutions for you:
first solution: - and the better one
in your case there is no need to use animation, its enough if you will use transition: width 2s; - and you should do that.
you checking if the value "exist" with if (scope.value) and when you reset the width of the progress remain as it was and not changed
you adding .zero class that color
see here
second solution:
1.. in your case there is no need to use animation, its enough if you will use transition: width 2s; - and you should do that.
2.. if you have zero class set .progress-black { width: 0 !important; } so the width will be 0 (important because you want it to be stronger then the inline css).
see here
I've been trying to create a transition effect where, on hover, a sub menu slides out from underneath the main navigation bar. So far, I've got all the elements in place and wasted HOURS playing around with different methods from various posts, but to no avail.
Here is the JSFiddle.
I'm guessing I'm gonna have to get rid of display: none -> display: block way of hiding the submenu as its no good for transitions but various other methods such as transitioning max-height, opacity, pulling it down from a massive top value etc have failed. With the inflated top value method, the submenu slides over everything rather than under and changing z-index values somehow pushes it behind EVERYTHING while turning the background transparent. Very weird behaviour.
I would greatly appreciate it if someone could explain to me how to go about creating a smooth slide-out transition for the sub-menu.
Thank You
Transforming the scale or transitioning the max-height: 0 is a better option for navigational elements.
JSFiddle
If the initial state of the element is "display: none" it is passed over in the DOM which will hide that element (as well as any children) from assistive technology.
Also, you can use a sibling sectors to select .dropdown, instead of overly nesting elements
Adjacent sibling: .dropbtn:hover + .dropdown_content
Working example:
https://jsfiddle.net/6umr3733/1/
Procedure: we set the value of top for the dropdown to -100%. This puts it out of the screen. We give it a transition value for it to be smooth when it goes down.
.dropdown_content {
line-height: 1;
position: absolute;
top:-100%;
background-color: #fff;
z-index:-10;
width: 120%;
left: -20%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
transition: all 0.5s ease;
}
When we hover over dropdown, your div goes down by 200%, that is, to its original position.
.dropdown:hover .dropdown_content {
top:100%;
}
Hope I helped, good luck.
You can simply use the transform: scaleY(); attribute to squash the submenu to 0 when hidden, and to 1 when visible.
Check JSFiddle
Just remove the Display attributes, and add a transition, and transform: scaleY(0); transform-origin: 0 0; when is normal, and transform: scaleY(1); when hover to .dropdown_content.
In Webkit, the following fiddle works as expected. That is to say, #navigation's left padding is transitioned properly from 0 to 100px.
In Firefox, the identical code somehow prevents the transition from occuring.
http://jsfiddle.net/threehz/JEMN6/27/
my css:
#navigation {
background: #ccc;
-webkit-transition: padding-left 0.125s ease;
-moz-transition: padding-left 0.125s ease;
transition: padding-left 0.125s ease;
margin: 0;
padding-left: 0;
width: 100%;
}
.fixed #navigation {
padding-left: 100px;
}
.fixed #page-navigation {
position: fixed; // removing this results in #navigation transition working properly in firefox
height: auto;
border-top: 1px solid #000;
width: 100%;
}
It seems it is related to the parent element's positioning changing. As noted above, if I remove position: fixed from the parent element, the transition works in Firefox:
http://jsfiddle.net/threehz/JEMN6/28/
Problem is, for what I am trying to accomplish, the header must become fixed, AND the child padding property must transition, so simply removing the position: fixed is not an option.
Thoughts?
The transition works if you toggle it from Firebug/DevTools. In the other hand:
Using transform: translate(100px) or position: absolute + left: 100px for the li items or
Using a transition delay
don't work. The transition event is not even fired :/ ( http://jsfiddle.net/JEMN6/25/ )
It seems that FF can't handle a simultaneous redrawing of the #page-navigation container (since position: fixed takes it out the document flow) and the #navigation child, so the transition event gets aborted.
As Alex Morales suggests, you could use an animation, but you'd need the opposite one to get a transition when removing the #fixed class.
Introducing a minimal delay through JavaScript is also an option:
$('#toggle').click('on', function() {
$('body').toggleClass('fixed');
setTimeout(function () {
$('#navigation').toggleClass('get-padding')
}, 20);
});
http://jsfiddle.net/JEMN6/26/
Not an ideal solution, though.
This looks like https://bugzilla.mozilla.org/show_bug.cgi?id=625289 to me: the parent is having its CSS boxes reconstructed, which loses the old computed style on the child.