I have a Bootstrap (4) centered Modal with a fixed width and dynamic height based on the content within the modal (the default behavior).
Inside the modal, I have several divs that will be hidden or shown based on some conditions. The text inside the modal also change, and can be longer than expected. I don't know which of these components will be visible or what will be hidden, so the height can't be fixed.
Right now when a components is set as hidden the modal instantly changes its height. I want to use CSS transitions to smoothly change the height of the modal.
I have tried to apply this CSS, without success:
.modal {
transition: height 1s !important;
}
Surely I'm missing something due to my limited knowledge of the CSS animator. How can I apply a smooth transition?
If you control the elements that inside the modal with display: none, you can not transition smoothly and it is better to hide their with height:0 and
To transition smooth modal height, enter the following code:
.modal , .modal * {transition: all 0.2s ease}
Related
I have a feature in my React app that allows users to see a UI in both mobile and desktop sizes. I have my wrapper and I change the width of it by using classes like this:
.wrapper.desktop {
width: 720px;
}
.wrapper.mobile {
width: 320px
}
I also animated changes of width by using:
transition: width 500ms ease-in-out;
Now, the problem is that I want to fade the children and content of my wrapper while changing the width to have smooth animation and a loading overflow. Is it possible to use CSS and how? If not, is it possible in React and how?
I have a menu that becomes a fixed menu when scrolling down the website. When that happens, the class r-header-fixed is added (and removed when scrolling back up). The logo that is inside my fixed menu is smaller than the one you see on pageload but when I scroll the size instantly changes. How can I ease the transition?
This is my css line:
.r-header-fixed .container .row .col-md-3 .r-logo .d-inline-block .logomurrays{
height:70px;
}
I tried adding transition: height 4s; to that, but the change is still instant.
I try to use Bootstrap affix to make an element, during affix on bottom of page and on affix-top to top od the page.
I implement affix and on desktop it works like a charm but on mobile it doesn't work. I mean: on mobile there aren't the toggle of the classes and it remain always with affix-top class..
I use this code:
<div class="affix-div" data-spy="affix" data-offset-top="197">
<h1>Title</h1>
</div>
and css are:
.affix-div.affix {
bottom: 10px;
right: 10px;
z-index: 9999;
}
Why on mobile not change the classes??
(Sorry for bad english)
Bootstrap affix calculates offset based on document height, window scrollTop and the element's offset. One of the pitfall here is the $(window).scrollTop. According to the overflow specification, if you set the body's overflow property neither to visible or clip values, it makes the body a scroll container and scrollTop wont work anymore, because now the body is a scroll container and scrolling takes effect inside of it, not in the window.
Look for the body overflow, overflow-x or overflow-y properties and set the values to visible. If you need the overflowing effect, just wrap the body's content inside of a another element and set the overflow there.
I make the scrollbar on a page always visible with:
html {
overflow-y: scroll;
}
On the other hand, I also want the scrollbar height increase automatically when opening a modal dialog that is longer than the page. However, the scrollbar height does not increase automatically. If I set overflow-y: auto; this makes the scrollbar hidden for the initial state that I do not like. Any idea to fix it?
Bootstrap's modal does an excellent job of this by hiding body overflow and using a fixed overlay.
body.modal-open{overflow:hidden}
/* this is the overlay */
.modal{position:fixed;top:0;bottom:0;left:0;right:0;}
.modal .modal-dialog{/* taller than window */}
I'm trying to create a website using flexbox, and one of the main features of the site is to hide the navigation bar, in this case the left panel in the JSFiddle, when the viewport is between 480px and 1023px. Currently it works, but the animation is very jumpy and it is not clear what is happening.
Right now I am trying to use a transition in css3, but that doesn't seem to animate anything at all...
Going from this:
aside {
-webkit-transition: all 1s ease;
width: 270px;
}
To this:
aside {
display: none;
}
No transition happens between the two states.
How can I animate the navigation disappearing and the main growing to fit the screen?
You can not animate Display in CSS as of today.
You can probably chain animation on some properties that can be animated. For instance the width and height of some flexboxes.