Support

Account

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

Solving

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. http://stackoverflow.com/questions/3331353/transitions-on-the-display-property.

    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.