Question

So i have a bunch of blocks that have a picture and a title on them. They are 160px high, and i want to make it so when i click on them, a new element appears beneath them. I have done this with javascript easily, but that was just for the prototype and now i am rushing the project and i have to have it done by next week. So i did this:

.open.expand{
    animation-name: toggleHeight;
    animation-duration: 150ms; //test
    animation: linear;
}

@keyframes toggleHeight{
    from{height: 0px;}
    to{height: 200px !important;} //its important cause it needs to overwrite the original
}
.open{
    max-height: 200px;
    height: 200px;
    //and other properties for styling like color/bgcolor/font siez...
}

SO how do i make this work? Any ideas? I did it with js and when i go to inspect element it does add the class expand , but when i check if the animation properties are added, they have are not there...

Answer 1

First your code is wrong because you are using linear with animation property and it should be like this:

.open.expand{
    animation-name: toggleHeight;
    animation-duration: 150ms; 
    animation-timing-function: linear;
}

Or simply

.open.expand{
     animation: toggleHeight 150ms linear;
}

Second using !important is not allowed with keyframes. As you can read here:

Declarations in a keyframe qualified with !important are ignored.

And even if you fix these, you will still have an issue. You want to animate the height of your element BUT using animation is the wrong approach simply because the animation will end and when the animation ends your element get back to its initial state and not keep the final state of the animation.

If you are looking to animate your element, simply use transition.

Here is an example where I use hover that you can easily change with a class and add your JS code:

div {
  width: 200px;
  display: inline-block;
}

.first {
  height: 50px;
  border: 1px solid;
}

.first:hover {
  animation-name: toggleHeight;
  animation-duration: 150ms;
  animation-timing-function: linear;
}

@keyframes toggleHeight {
  from {
    height: 0px;
  }
  to {
    height: 200px;
  }
}

.second {
  height: 50px;
  border: 1px solid;
  transition: 0.15s;
}

.second:hover {
  height: 200px;
}

<div class="first">
  This one uses the animation (the wrong idea)
</div>
<div class="second">
  This one uses transition (the correct idea)
</div>

Animation wont run after adding the class containing its name

1 个答案: