Анимировать div при добавлении контента - PullRequest
Новая
       26

Анимировать div при добавлении контента

0 голосов
/ 30 августа 2018

Я создаю небольшую живую функцию поиска для веб-сайта. Все работает отлично, но я хотел бы иметь возможность оживить результаты 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>

Контейнер результата поиска - это класс, который фактически расширяется в размере. Класс результатов поиска на самом деле находится в цикле for для записи всех сообщений на страницу. Я думаю, что мне нужно больше javascript для этого, но я никогда не работал с анимацией javascript. Есть мысли?

1 Ответ

0 голосов
/ 30 августа 2018

Вы можете использовать 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);

Вы можете найти нужную анимацию и добавить ее в область // do animation

.
...