在我滚动到React中的元素之前,如何延迟CSS动画?

我已经建立了与此类似的动画,现在我要确保仅当用户滚动到某个位置以使被动画显示的内容真正可见时,它才能播放。我该如何在React App中做到这一点? 我尝试阅读有关该问题的信息,但大多数解决方案都指向jQuery或Animate.css或Waypoint js。

  1. 没有使用任何这些方法,有没有办法做到这一点?
  2. React和jQuery如何一起工作而不引起冲突? (我问是因为我也在使用react-bootstrap,并且他们明确声明他们是从头开始构建的,以避免将jQuery与React一起使用)我什至应该在哪里编写jQuery代码?
body{
  font-family: Helvetica, Arial, sans-serif;
}
.container{
  width: 50%;
  margin: 0 auto;
}
@keyframes load{
  from {
    width: 0%
  }
}
@-webkit-keyframes load{
  from {
    width: 0%
  }
}
@-moz-keyframes load{
  from {
    width: 0%
  }
}
@-o-keyframes load{
  from {
    width: 0%
  }
}

.bar{
  background-color: #EEE;
  padding: 2px;
  border-radius: 15px;
  margin-bottom: 5px;
  font-size: 14px;
  color: #FFF;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.bar::before{
  content:  attr(data-skill);
  background-color: #f3b0ff;
  display: inline-block;
  padding: 5px 0 5px 10px;
  border-radius: inherit;
  animation: load 2s 0s;
  -webkit-animation: load 2s 0s;
  -moz-animation: load 2s 0s;
  -o-animation: load 2s 0s;
}

.bar.front::before{
  background-color: #ffcc33;
}
.bar.back::before{
  background-color: #a6cfe3;
}

.bar.learning::before{
  width: calc(20% - 10px);
}
.bar.basic::before{
  width: calc(40% - 10px);
}
.bar.intermediate::before{
  width: calc(60% - 10px);
}
.bar.advanced::before{
  width: calc(80% - 10px);
}
.bar.expert::before{
  width: calc(100% - 10px);
}
  <div class="container">
    <h1>Skill Set</h1>
    <div class="bar learning" data-skill="TDD"></div>
    <div class="bar back basic" data-skill="Python"></div>
    <div class="bar back intermediate" data-skill="C#"></div>
    <div class="bar front advanced" data-skill="CSS3"></div>
    <div class="bar front expert" data-skill="HTML5"></div>

  </div>
评论
抄凝雪
抄凝雪
  1. You can always use a library like react-is-visible. This tracks the visibility of the component. You could then set a useEffect on the visibility variable, which could then add a class to your to-be-animated component once it becomes visible.
  2. Why would you want jQuery and React to work together? React should be able to achieve what you want to achieve with jQuery!
点赞
评论