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

Question

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

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

我想为这个字段的隐藏和显示设置动画，例如让它滑入和滑出视图。我不能使用 CSS，因为 CSS 无法使用“显示”属性进行动画/过渡，并且隐藏字段没有设置高度。我的网站上已经有 jQuery，所以我想找到一种方法来使用 jQuery 来实现这一点，例如。使用类似 slideToggle 或类似的东西。

问题是，我不想将动画绑定到单选按钮上的单击操作。特别是因为我希望它能够在任何表单上的任何隐藏字段上工作。因此，如果可能的话，我只想在隐藏字段的类从 .wpforms-conditional-hide 更改为 .wpforms-conditional-show 并返回时使用 slideToggle （或类似的东西），或者每当其 CSS 属性从 display:none 更改为display:block 并返回。

这可能吗？

[更新]

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

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

您可以使用Mutation Observer 来检测类的变化。这是一个例子：

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">