添加内容时动画div

Question

我正在为网站构建一个小的实时搜索功能。一切都很好，但我希望能够为结果div制作动画。所以当div被填充时，给div稍微过渡一下。现在这一切都是非常突然的。

<div class='search-result-container'>           
    // for loop here: 
    <div class="search-result">
        <a href="<?php echo esc_url( post_permalink() ); ?>">   
            <div class="inner-search-result">
                <h2><?php the_title();?></h2>
                <img src="<?php echo get_the_post_thumbnail_url( $ID, 'full' ); ?>">
            </div>
        </a>    
    </div>
    // end of for loop
</div>

search-result-container是实际扩展的类。 search-result类实际上是一个for循环，用于将所有帖子写入页面。我想我需要更多的javascript，但我从未真正使用过javascript动画。有什么想法吗？

Answer 1

你可以使用jQuery

首先需要验证div是否为空：

  function divEmpty( el ){
      return !$.trim(el.html())
  }
  if (divEmpty($('.search-result-container'))) {
      // console.log('its empty nothing happens')
  } 

  else { 
  //do animation
  }

动画的语法如下：

$(selector).animate({params},speed,callback);

您可以搜索desated动画并将其添加到// do animation区域