Add a smooth transition beneath the search field

[HeizpadParticipant]

Hi!

I display the Ajax Search field as a block element, not hover position.

I want to display text beneath the display. When the user types in something Ajax Search immediately loads Live search results which is great. However, the text beneath the search field is being pushed down pretty choppy, not smooth at all. And when I remove the search term the live search is closed and the text gets pushed up again, really choppy again.

Is it possible to make the transition smoother so the text is being moved down like a nice transition instead of this immediate pushdown/pushup movement? Like a button that has a color change hover effect but no css “transition: 1s;” for example. With a transition the button color change is more smooth. I want the same for the text beneath the search field.

I hope you understand what I mean. Thank you for your help and efforts.

[Ernest MarcinkoKeymaster]

Hi,

Thank you for the details!

I’m afraid this may not be possible. A transition will not work, as not the element below is changed, but the actual search container. The immediate pushdown is happening because the search container gets visible, and immediately takes the space inbetween the lements. While the container itself is animated by default with a “fade down drop” animation so it looks smoother, it will not affect the elements below.
I am not sure if there is any way of adding an animation to the element below only via CSS because no property chanes on it, so no transition will trigger.

The only possibility I can see is to apply an animation via javascript hooks, on the asp_resu_show and asp_results_hide events – to add customized show/hide animations to the element after the search results container.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts