Несколько анимаций при срабатывании путевой точки - PullRequest
Новая
       17

Несколько анимаций при срабатывании путевой точки

2 голосов
/ 03 июля 2019

Я бы хотел запустить следующую анимацию при срабатывании элемента путевой точки (простая гистограмма):

  • Цветной div изменяет ширину от 0 до 500px
  • Второй div, содержащий текстисчезает в

Проблема: цветной div работает, как и ожидалось, но мне не удалось заставить работать вторую часть.Либо он вообще не отображается, либо отображается постоянно.

Я уже пробовал такие идеи, как работа с span-тегом, но я до сих пор не понимаю, как он работает.

Это мой код: 

<style>
.Waypoint-Bar{
  width: 100px;
  height: 10px;
  background-color: red;
  transition: all 440ms ease-in;

}

  .Waypoint-Bar-Animation{
    width: 500px;
    height: 10px;
    background-color: blue;
}

.bar-text {
  display: none;


}

.bar-text-animation {
  display: block;

}
</style>
</head>
<body>

  <div class="Waypoint-Bar"></div>
  <div class="bar-text">Text</div>

 </p>

<script>

var $bar-text = $('.bar-text');
var $waypointbar = $('.Waypoint-Bar');


$waypointbar.waypoint(function(direction) {
    if (direction == 'down') {
    $waypointbar.addClass('Waypoint-Bar-Animation');
    $bar-text.addClass('bar-text-animation');


  } else {
    $waypointbar.removeClass('Waypoint-Bar-Animation');
    $bar-text.removeClass('bar-text-animation');
  }
}, {offset: '53%'});


</script>
...