Home Forums General Issues Can I use a different transition when hiding/showing conditional fields?


Can I use a different transition when hiding/showing conditional fields?

  • I’m using a select box to control which of 3 Text Boxes are used. The Conditional Logic is functioning as expected – swapping out one field for another. However, the swap almost happens TOO quickly that it’s not obvious to the user that something is changing.

    Might there be a way to have the old items fade out quickly and the new items fade in? Or some other transition that just takes a little while as to draw attention to the fact that something is changing?

  • That’s not possible due to the fact that ACF uses either display: block; or display: none; for the css that controls if the fields are shown or not and there isn’t any way to transition between the two states.

    It is possible to add custom CSS and JS to fields, but I don’t see how this would really help since the existence of the hidden-by-conditional-logic class is what hides a field. Basically you’d need to set the opacity of every field that does not have this class to 100% and set the opacity of the fields with this class to 0% and then you might be able to transition that, but to be honest, I haven’t got a clue if that would work.

  • I think I found a way:
    override the display: [ none | block ] with opacity: [ 0 | 1 ] + height: [ 0 | auto ]

    .acf-field {
      transition: all .5s ease-in 0s;
    #acf-form .acf-field.acf-hidden {
      display: block !important;
      opacity: 0;
      height: 0;
    #acf-form .acf-field:not(.acf-hidden) {
      opacity: 1;
      height: auto;

    Inspired by this and this (as partial answers)
    Note: I just figured this out, I’m not yet sure if there are any downsides to it.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.