无法为particles.js div设置动画

Question

我有两个particles.js的div，但我似乎不能动画它们。我已经在页面上的其他div和容器上测试了动画，但它就是不能与particles.js div一起工作。我删除了他们的位置:固定属性，但它仍然不起作用。

我正在向div添加一个shift类，当用javascript单击一个按钮时，它看起来如下所示：

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是一篇很好的文章。