Question

我想在触发航点元素（简单的条形图）时触发以下动画：

彩色div将宽度从0更改为500px
包含文本的第二个div逐渐消失

问题：彩色div可以正常工作，但是我没有设法使第二部分正常工作。要么根本不显示它，要么一直显示它。

我已经尝试过使用span-Tag之类的想法，但是仍然无法正常工作。

这是我的代码：

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

触发航点时的多个动画

0 个答案: