Transitioning Affixed Navigation bar - CSS - javascript

I've a got a fixed navigation bar using the affix() of Twitter Bootstrap 3.
Everything is working fine with the navigation bar. I wanted to add a transition in the appearance of the navigation bar.
When the user scrolls the page the navigation bar is being displayed instantly. I'd like to animate it.
Tried with -webkit-transition: all 1s ease-in but the result was for the width of the navigation bar.
Here's the FIDDLE.
Please help me in animating it when the user scrolls down.

To transition something, you move it from one state to another. So what you are trying to do is change one or more of the properties of the .navigation element.
What properties do you have available to change?
You can't change the height, width, or opacity, as those need to remain the same before and after the transition. If you want the transition to involve movement, then your best bet is to transition the position of the element. Let's do this with the "top" property.
After the transition, your navigation needs to have 0 as its top value. The height of the element is 250px, so let's make it start with top: -250. However, if we do this, the menu will initially be hidden. To fix that, we need to make it ignore the top value by removing the relative positioning.
.navigation {
background: #fff;
/* position: relative; */
width: 100%;
top: -250px;
}
Then we can transition it to 0:
#nav.affix {
position: fixed;
top: 0;
z-index: 1030;
width: 100%;
-webkit-transition: all 2s ease-in;
transition: all 1s ease-in;
}
RESULT:
http://jsfiddle.net/ShL4T/8/
Ref: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

I could not get this to work until I implicitly added position:static to .navigation.

Related

When an element unmounts, how can you make the remaining elements perform a slide transition/animation to fill the space?

I have a notifications container which has fixed position on the right of the screen, but has no size by default. Each time a notification is rendered, it will populate the container, giving it width and height, and the notifications will appear one after the other in a column. I chose to use flex, but the same thing can be achieved without flex, and instead giving each child a margin-bottom for the gap.
.notifications {
position: fixed;
top: 5rem;
right: 1rem;
width: auto;
height: auto;
gap: 0.5rem;
display: flex;
flex-direction: column;
}
The notification itself has a lot of parts to it and the implementation isn't really relevant, so to simplify, Each notification has basic slide-in and slide-out animations:
.favorites-notification {
// other styles
transform: translateX(200%);
opacity: 0;
animation: slideIn 0.375s ease-out forwards, slideOut 0.375s ease-out 2.625s forwards;
}
#keyframes slideIn {
100% {
transform: translateX(0%);
opacity: 1;
}
}
#keyframes slideOut {
100% {
transform: translateY(-100%);
opacity: 0;
}
}
This looks pretty good when only one notification is rendered on the screen. However, when there are multiple notifications, in a top to bottom list, the remaining notifications will snap in place to the empty space left behind by the unmounted notification. Each notification's lifespan is set to 3 seconds with a setTimeout in useEffect on mount. How do I get the remaining elements to slide up to fill the position left by the unmounted notification, rather than just snap in place when the notification unmounts? I want the other notifications to slide up at the same time as the highest one is sliding up and out so it looks smooth.
I've tried collapsing the height of the notification to remove in the slideout animation, but it doesn't achieve the desired result and it's very unsmooth. I also don't want to affect the height of the notification that's sliding out because it lingers on the screen for a bit, and that's not the affect I'm going for. I know that translate doesn't affect document flow, so the DOM still thinks the element is where it originally was until it unmounts.
All help is appreciated. If my question/explanation isn't clear, please point that out and I'll revise it.
Edit: Using the top property didn't seem to work either. Setting negative margin-top is better, but it starts off smooth and still snaps at the end. To make negative margin work smoothly, I have to know the exact size of the notification, and that varies.

css transition height to hide content in container

I have a div absolute positioned located on the bottom side of the screen. I want to hide its content with an animation (not only setting display none) when a sibling div is clicked by transitioning max-height to 0.
The problem is that the content has at the same time child tags which keep height setted, causing to overflow the current body height.
What is the best solution to solve it?
I have reproduced the behaviour: https://codepen.io/javheroli/pen/QWbyZEr?editors=0110
.hide-container{
opacity: 1;
max-height: 4em;
transition: opacity .8s, max-height .5s;
}
.hide {
opacity: 0;
max-height: 0;
transition: opacity .3s, max-height .5s;
}
I think the easiest way would be to transition only the height property and add an overflow: hidden definition.
That way when you reduce the height the content just gets hidden. If you also want to animate the content you could animate the opacity of the child elements. It would be easier to check if you'd provided your HTML structure.
This can be fixed by adding overflow: hidden; to your .hide-container .hide element.

How to fix position glitching in css?

I want to know how can I fix a <div> glitching while changing a div content using .load()?
The div CSS is:
#MyDiv{
position: fixed;
z-index: 9;
bottom: 0;
transition: transform 200ms;
}
whenever a div content changes, the div starts glitching and changing its position then it comes back to normal.
I think that what's causing the problem is the phone layout, that glitch happens only on phones

How to avoid horizontal scroll bar with transitioned elements

I have multiple elements in which I am using transform:translate to add a slide in transition effect. This is working great. The issue I am having is since the elements are off the screen initially, scroll bars are appearing until the element transforms and slides over.
I am using waypoints for the scroll point and I have seen other scenarios (slidein from off the page) that the scroll bar does not appear.
How can I ensure the scroll bar does not appear with these transitioned elements on my page?
The active class is added to phone-slide when the waypoint is reached.
#phone-slide {
width: 65%;
display: block;
height: auto;
position: absolute;
right: -50%;
margin: 10px 0;
opacity: 0;
transition: 1s;-webkit-transition: 1s;
}
#phone-slide.active {
opacity: 1;
transform: translateX(-50%);-webkit-transform: translateX(-50%);
transition: 1s;-webkit-transition: 1s;
}
The best way would be to position phone-slide inside an absolute positioned div with hidden overflow. This div can have width and height equal to the page dimensions and the content inside it will be truncated if it goes beyond with no scrollbars.
See THIS solution by Jacob Ewing
Another accepted answer

Transition elements below a transitioned v-if

I have two elements, and the top one's visibility is controlled by a v-if on a simple boolean.
transition(name="fade")
#element1(v-if="showFirst")
p Foo
#element2
p Bar
The first element is wrapped in a <transition> tag, exactly as per the Vue documentation.
However, while this does create a fading animation, the rest of the content on the page still jumps very jarringly.
How can I create a transition that will also smoothly transform the position of any and all siblings that follow?
A fiddle demoing this issue.
You need to use a transition-group and key your dynamic div and static div
<transition-group name="fade">
<div v-if="switc" key="dynamic" class="animated">
...
</div>
<div key="main-content" class="animated">
...
</div>
</transition-group>
And use this css classes
.fade-enter,
.fade-leave-active {
opacity: 0;
transform: translateY(-10px);
}
.fade-leave-active {
position: absolute;
}
.animated {
transition: all 0.5s;
/*display: flex;*/
width: 100%;
}
The real trick is to change position to absolute when leaving, then any other content can take correct position.
To know more about how Vue animate things please see this FLIP explanation post
And please see this working fiddle
https://jsfiddle.net/bjfhth7c/4/
Edit
By mistake I did set display: flex; in .animated class, that was causing to every inner element to render in a strange way.
So now, I completely remove .animate class, and instead apply transition: all 0.5s and width:100% to every direct inner element of .wrapper
My final scss looks like this:
.wrapper {
display: flex;
flex-direction: column;
>* {
transition: all 0.5s;
width:100%;
};
}
.fade-enter,
.fade-leave-active {
opacity: 0;
transform: translateY(-10px);
}
.fade-leave-active {
position: absolute;
}
Flex layout is a extend subject, but in short for this particular case flex-direction: column is arranging elements one bellows previous one.
If one of those elements has absolute position will be ignored in flex layout so any other elements will be redistributed on available space.
Please see this guide about flexbox and last working fiddle hope it helps.
You can use a slideDown/slideUp animation instead. For achieve this you don't need to know a height of a sliding element, the principles of max-height transition explained there.
So, as a result it will cause animated moving of elements below target.
Check out my example based on your fiddle.
vue js provides different transition classes, you have to use those properly to smooth the transition, I have tried with your example in this fiddle with some CSS, have a look.
.fade-enter-active, .fade-leave-active {
transition: all .5s;
height: 100px;
opacity: 0.5;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
height: 0px;
opacity: 0;
}
Some details from documentation:
There are six classes applied for enter/leave transitions.
v-enter: Starting state for enter. Added before element is inserted, removed one frame after element is inserted.
v-enter-active: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
v-enter-to: Only available in versions >=2.1.8. Ending state for enter. Added one frame after element is inserted (at the same time v-enter is removed), removed when transition/animation finishes.
v-leave: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
v-leave-active: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.
v-leave-to: Only available in versions >=2.1.8. Ending state for leave. Added one frame after a leaving transition is triggered (at the same time 7. v-leave is removed), removed when the transition/animation finishes.
You can as well use CSS animations where you can provide on different phases of transition what will be your css property to make your transitions more smooth, like following and demo fiddle:
.fade-enter-active {
animation: bounce-in .5s;
}
.fade-leave-active {
animation: bounce-out .5s;
}
#keyframes bounce-in {
0% {
height: 5px;
}
30% {
height: 30px;
}
50% {
height: 50px;
}
100% {
height: 100px;
}
}
#keyframes bounce-out {
0% {
height: 90px;
}
50% {
height: 50px;
}
100% {
height: 0px;
}
}

Categories