hooks to allow CSS transitions

  • Resolved irving.bos

    (@irvingbos)


    11 months, 1 week ago

    HI, are there any ways to alter the CSS settings, without getting into a whole new world of hurt? I’d like to alter the showing/hiding of dependencies, so that rather than straight display: none/block, I can allow for transitions, for a smoother look og showing/hiding elements.

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author CodePeople2

    (@codepeople2)

    11 months, 1 week ago

    Hello @irvingbos

    Yes, you can emulate the smooth process by using CSS. Please enter the style definition below through the “Customize Form Design” attribute in the “Form Settings > Advanced Settings” tab:

    #fbuilder .fields{
      opacity: 1;
      visibility: visible;
      max-height: 1000px;
      transition: opacity 1.5s ease, visibility 1.5s ease, max-height 1.5s ease;
      overflow: hidden;
    }

    form #fbuilder .ignore,
    form #fbuilder .fields:has(.ignore ) {
      display: block;
      opacity: 0;
      visibility: hidden;
      max-height: 0;
    }

    Best regards.

    Thread Starter irving.bos

    (@irvingbos)

    11 months, 1 week ago

    Thanks! That works well. Strange that the editor throws error on the has() with class name: form #fbuilder .fields:has(.ignore), but it works. (even online linters throw error on it)

    thanks for the support!

    irving

    Plugin Author CodePeople2

    (@codepeople2)

    11 months, 1 week ago

    Hello @irvingbos

    Please don’t worry about the error message related to the :has() CSS instruction. The CSS parser bundled with WordPress simply doesn’t identifies that modern feature yet.

    Best regards.

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

The topic ‘hooks to allow CSS transitions’ is closed to new replies.

Tags