Question

我有2个particles.js div，但是我似乎无法为其设置动画。我已经在页面上的其他div和容器上测试了动画，但是它不适用于particles.js div。我删除了他们的position：fixed属性，但仍然无法使用。

使用javascript单击按钮时，我正在向div添加一个shift类，它看起来像这样：

document.addEventListener('DOMContentLoaded', function(){
  document.querySelectorAll('.content-link').forEach(function(button){
    button.onclick = function (){
      document.querySelector('#particles-js').classList.add('shift');
    }
  });
});

css：

  .shift{
    transform:translateY(-250px);
    transition:1s ease;
  }
  #particles-js{
    height:150vh;
    margin-top:33vh;
    width:100vw;
    background:#000000;
    transform: skewY(-15deg);
    overflow:hidden;
    outline: 1px solid transparent;
  }

html：

  <div id="particles-js"></div>
  <div class="nav">
    <a href="blog.html" class="content-link">Blog</button>
    <a href="#" class="content-link">Projects</button>
    <a href="#" class="content-link">Work</button>
    <a href="#" class="content-link">Resume</button>
  </div>

有人对为什么它无法按预期工作有任何想法吗？

Answer 1

问题出在CSS的specificity上。

尝试将css更改为以下内容：

#particle-js.shift{
  transform:translateY(-250px);
  transition:1s ease;
}

要了解有关CSS特异性的更多信息，this是一篇不错的文章

无法设置particles.js div的动画

1 个答案: