Javascript页面转换

我一直在尝试在Ruby on Rails应用程序中为我的页面创建淡入淡出效果。我发现了一个网站，似乎提供了一个合理的指南，但它不起作用

在我的每个html文件（application.html.erb除外）中，我都有一个div，它用一个名为“primary content”的类来封装所有内容。然后我有一个css文件animate.css（改编自），其代码如下：

.animated {
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp;
}

此css文件位于my assets/css文件夹中，并在my application.html.erb文件的标题中调用

还有javascript，在assets/javascripts文件夹中的一个文件中。它在application.js中是必需的，并在application.html.erb的标题中调用——当它不工作时，我还在每个视图的底部调用它。守则内容如下：

document.addEventListener('page:change', function() {
        document.getElementById('primary-content').className += 'animated fadeInUp';
});
document.addEventListener('page:fetch', function() {
        document.getElementById('primary-content').className += 'animated fadeOutUp';
});

我的目标是现有页面向上淡出，新页面向上淡入。有人看到我遗漏了什么吗？我没有任何使用关键帧的经验，也没有在css中使用-webkit的经验，但这些都是从animate.css网站上借来的

---

谢谢

使用

application.css中的链轮是否需要您的css对不起，我不知道您的意思。我在application.css的开头导入引导链轮，但我认为css文件夹中的animate.css将在运行时编译到application.css中。还有什么我应该做的吗？我能够让它在rails新应用程序上正常工作，只需将代码放到application.css和application.js中，您可以在这里看到它们。有可能javascript没有启动您的javascript控制台上有任何错误吗？