Question

我已经用烧瓶建立了我的网站。帖子通过“ for”语句放在页面上。问题是每篇文章都只有相同的类，没有任何ID。我想添加一些简单的淡入或不透明效果。有没有一种简单的方法可以做到而又不会弄乱代码？

我不喜欢JS，我看了一些教程，但是没有发现任何帮助。每个案例都是使用id为div的。

{% for post in posts.items %}
<article class="media content-section">
<img class="rounded-circle article-img" src="{{ url_for('static', filename='profile_pics/' + post.author.image_file) }}">
  <div class="media-body">
    <div class="article-metadata">
      <a class="mr-2" href="{{ url_for('users.user_posts', username=post.author.username) }}">{{ post.author.username }}</a>
      <small class="text-muted">{{ post.date_posted.strftime('%Y-%m-%d') }}</small>
    </div>
    <h2><a class="article-title" href="{{ url_for('posts.post', post_id=post.id) }}">{{ post.title }}</a></h2>
    <p class="article-content">{{ post.content[:300] }}... <hr /><small class="text-muted"><a href="{{ url_for('posts.post', post_id = post.id) }}">read more >></a></small></p>
  </div>
</article>

{% endfor %}

Answer 1

我不清楚您是否要错开元素的淡入度。这是一个交错淡入淡出的示例。

const articles = document.querySelectorAll('.media.content-section');

articles.forEach((article, index) => {
  setTimeout(() => {
    article.classList.add('show');
  }, (index * 350))
});

.media.content-section {
  opacity: 0;
  transition: opacity 0.35s ease-in;
  background-color: red;
  display: inline-block;
  width: 100px;
  height: 100px;
}

.media.content-section.show {
  opacity: 1;
}

<article class="media content-section">
</article>

<article class="media content-section">
</article>

<article class="media content-section">
</article>

http://jsfiddle.net/9kfo1za3/

Answer 2

最简单的方法是在项目中包含 animate.css库

animate.css

，然后将动画的fadeIn 类添加到您的文章标签（或您希望添加 fadeIn 效果的其他标签）中。

<article class="animated fadeIn">...</article>

没有ID的div的淡入效果

2 个答案: