使用jQuery动画WPForms隐藏/条件字段

Question

我在我的WPForms站点上使用WordPress插件。我的表单之一有一个隐藏字段，当您单击窗体上的其他地方的单选按钮时，该字段会出现，当您单击另一个单选按钮时，该字段会再次消失。

隐藏字段在隐藏时有一个.wpforms-conditional-hide类，该类设置为display:none。当字段显示时，类神奇地更改为.wpforms-conditional-show，该属性被设置为display:block。

我想动画这个领域的隐藏和显示，例如，让它滑进和退出视野。我不能使用CSS，因为CSS不能使用"display“属性进行动画/转换，并且隐藏字段没有设置的高度。我已经有jQuery在我的网站上，所以我想找到一个方法来实现这一点与jQuery，例如。使用类似于slideToggle或类似的东西。

问题是，我不想将动画绑定到单选按钮上的单击操作。特别是因为我希望它能够在任何形式的隐藏域上工作。因此，如果可能的话，当隐藏字段的类从slideToggle更改到.wpforms-conditional-show和back时，或者当隐藏字段的CSS属性从display:none更改到display:block和back时，我只想使用一种方法(或类似的方法)。

这有可能吗？

更新

为了记录在案，这里是我现在使用的整个函数，它包含了@blex提供了他的答案和评论的代码和建议。下面的函数将与WPForms在WordPress上“按原样”工作。

function slide_hidden_wpforms_fields() {
if ( wp_script_is( 'jquery', 'done' ) ) {
?>
<script type="text/javascript">
jQuery( document ).ready(function( $ ) {
$( document ).one( "wpformsProcessConditionals", function() {
    var classname = 'wpforms-conditional-show';
    $( '.wpforms-field' ).each( function( i, el ) {
        var wasVisible = $( el ).hasClass( classname );
        var obs = new MutationObserver( function( mutations ) {
            mutations.forEach( function( mutation ) {
                if ( mutation.attributeName === 'class' ) {
                    isVisible = $( el ).hasClass( classname );
                    if ( isVisible !== wasVisible ) {
                        wasVisible = isVisible;
                        $( el )[isVisible ? 'hide' : 'show']().slideToggle( 200 );
                    }
                }
            });
        });
        obs.observe( el, {
            'attributes': true
        });
    });
});
});
</script>
<?php
}
}
add_action( 'wpforms_wp_footer_end', 'slide_hidden_wpforms_fields' );

Answer 1

编辑全文并粘贴答案，见@GermanKiwi's

您可以使用突变观察者来检测类的更改。下面是一个示例：

​

var classname = 'wpforms-conditional-show';
// For each input (use your own selector)
$('input').each(function(i, el) {
  // Save its state
  var wasVisible = $(el).hasClass(classname);
  // Create a mutation observer
  var obs = new MutationObserver(function(mutations) {
    // When mutations are received, for each of them
    mutations.forEach(function(mutation) {
      // If the mutation is a change of class
      if (mutation.attributeName === 'class') {
        // Check the presence of that class
        isVisible = $(el).hasClass(classname);
        // If that changed (and only for this specific class)
        if (isVisible !== wasVisible) {
          // Update the state
          wasVisible = isVisible;
          // Hide the element before sliding it down, or vice versa
          $(el)[isVisible ? 'hide' : 'show']().slideToggle(200);
        }
      }
    });
  });
  // Start the observer
  obs.observe(el, {
    'attributes': true
  });
})

// Just for the demo
var i = 0,
    inputs = $('input');
setInterval(function(){inputs.eq(i).toggleClass(classname);i=(i+1)%inputs.length;},100);

input { display: none; }
.wpforms-conditional-show { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Hello">
<input type="text" placeholder="World">
<input type="text" placeholder="And">
<input type="text" placeholder="Welcome">

​