0

I'm having the following setup:

#search-suggestion {
    @include transition(top 0.5s ease);
    left: 25%;
    width: 50%;
    display: block;
    padding: 10px;
    z-index: -1;
    opacity: 1;

    &.visible {
        top: 66px;
    }

    &.notvisible {
        top: -200px;
    }
}

but the transition isn't working, this works however when I add the top element to the #search-suggestion. But then the functionality doesn't work as intended with the .visible and .notvisible;

adding the @include transition(top 0.5s ease); to the .visible and .notvisible doesn't work for the animations.

Any suggestions?

Kiwi
  • 2,713
  • 7
  • 44
  • 82
  • You mean it works only when you add a initial value for `top` property (or) do you have a separate `top` element? Can you post the compiled CSS and maybe a demo? – Harry Dec 09 '15 at 09:31
  • 1
    Also, have a look at http://stackoverflow.com/questions/18440393/css-transition-does-not-work-on-top-property-in-ff/18441215#18441215. This could potentially be a duplicate depending on your answer to my previous comment. – Harry Dec 09 '15 at 09:32

0 Answers0