CSS Transition (Height Property) - Can't Get It to Roll from Bottom

CSS transition (height property) - can't get it to roll from bottom

One way to do this without using absolute positioning or altering your markup is to transition a margin-top at the same time as the height. So your CSS might look like:

html, body { background-color: #dedede; }
#appear {    width: 308px;    height: 0px;    overflow:hidden;    -webkit-transition: all 0.2s linear;    -moz-transition: all 0.2s linear;    -o-transition: all 0.2s linear;    transition: all 0.2s linear;    margin-top:331px;}.show:hover + #appear, #appear:hover {    margin-top:0;    height:331px;}

<a href="#" class="show">SHOW IT</a>
<div id="appear">    <img src="http://data.atria.sk/matmenu/celevyk.jpg" /></div>

How to animate height of transition-group container in Vue

Just add CSS-attribute to your container : transition: .3s where 3s is a value of transition time & change dynamically the height of container.

CSS transitions parent to match a childs final height

It can be done ONLY if you know previously the final height of the children.

var button = document.querySelector('button');var parent = document.querySelector('.parent');
button.onclick = function(){  parent.classList.toggle('toggle');}

.child1,.child2 {  height: 100px;  background: #faa;  overflow: hidden;  transition: all .3s;}
.child2 {  background: #aff;  height: 0;}
.toggle .child1 {  height: 0;}
.toggle .child2 {  height: 100px;}

<div class="parent">  <div class="child1">Something here</div>  <div class="child2">Or here</div></div><button>Click me</button>

Transitions on the CSS display property

You can concatenate two transitions or more, and visibility is what comes handy this time.

div {  border: 1px solid #eee;}div > ul {  visibility: hidden;  opacity: 0;  transition: visibility 0s, opacity 0.5s linear;}div:hover > ul {  visibility: visible;  opacity: 1;}

<div>  <ul>    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>  </ul></div>

CSS transition animate without presetting property value

Properties that have a numeric default can be animated without first instantiating their value.

The default of top is top: auto; (source), therefore you must declare a numeric value for it before animating, as CSS doesn't know how to transition from auto to number.

opacity on the other hand has a default of opacity: 1 (source), therefore you can animate it without first setting it's value.

Keep overflow div scrolled to bottom unless user scrolls up

I was able to get this working with CSS only.

The trick is to use:

display: flex;
flex-direction: column-reverse;

The browser treats the bottom like its the top. Assuming the browsers you're targeting support flex-box, the only caveat is that the markup has to be in reverse order.

Here is a working example. https://codepen.io/jimbol/pen/YVJzBg

CSS height expanding the wrong way

You can use position: absolute; and bottom: 0; on the div you want to expand. Then, just make sure that the parent element (container of the expanding div) is set to position: relative.

#thermometer { height: 377px; 
               width: 180px; 
               margin:5px; 
               padding:0; 
               border: #cccccc solid 1px; 
               background: url(thermometer.jpg);
               position: relative;}
#level { height: 250px; 
         width:26px; 
         margin: 0; 
         padding:0;  
         background: #eb1c22;
         position: absolute; 
         bottom: 0px; 
         left:71px; }

If 0 doesn't work for you, just adjust it until it does. The point is to use bottom, not top.

How to animate bottom: value to bottom: auto

As already mentioned by Patrick Allen in comments, you cannot animate/transition from or to an "auto" value using CSS. For your case, you could replace it with transform: translate() like in the below snippet and achieve the same effect.

Below is the relevant SCSS code and what it does:

• The transform: translateY(-100%) moves the elements content upwards by the exact height of the container element. This would hide the whole container.
• A top: 39px is added such that the chevron icon is still shown and only the content is hidden.
• On hover the transform is nullified by doing transform: translateY(0%). This puts the element back in its original position.
• But because of the top: 39px present in the unhovered state, the position of the container would be offset a bit and that can be nullified by adding top: 0px on hover.

.hud {
  position: absolute;
  width: 100%;
  text-align: center;
  transition: all 1s;
  top: 39px;
  transform: translateY(-100%);
  &:hover {
     top: 0px;
     transform: translateY(0%);
  }
}

body {  background: #121111;}.hud {  position: absolute;  color: red;  width: 100%;  text-align: center;  -webkit-transition: all 1s;  transition: all 1s;  top: 39px;  -webkit-transform: translateY(-100%);  -ms-transform: translateY(-100%);  transform: translateY(-100%);}.hud:hover {  top: 0px;  -webkit-transform: translateY(0%);  -ms-transform: translateY(0%);  transform: translateY(0%);}.pull-down {  color: #e6e6e6;  -webkit-transition: all 0.2s;  transition: all 0.2s;  cursor: pointer;  height: 24px;  margin-top: 15px;  font-size: 1.5em;}.pull-down:hover {  color: #fff;}.hud:hover .pull-down {  color: #fff;  -ms-transform: rotate(-180deg);  -webkit-transform: rotate(-180deg);  transform: rotate(-180deg);}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /><div class="hud">  <div class="hud-internal">    <p>foobar</p>  </div>  <i class="fa fa-chevron-down pull-down" data-hud-toggle></i></div>

---

Related Topics