Reveal.js: Problems with the animation when using the bootstrap 4

[ghost]

When I use below code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

Then animation has breaks in working. When I press key left,right, etc.. animation work only sometimes. I see problem with progres line in below window too. Is it a bug? Anyone tried test it?

regards H.

[bnjmnt4n]

I don't seem to see any issues just loading those scripts along with a simple Reveal presentation. Your setup probably is a bit more complicated, and there might be issues with conflicts between your setup of Reveal and those libraries.

[Glidias]

Bah! You need to remove the following code from: _reboot.scss in Bootstrap 4!

[hidden] {
display: none !important;
}

Or perhaps overwrite it back to inherit/initial or something. display:none causes conflicts with animation, as revealjs uses the "hidden" property for the sections to determine state!

Honestly, they had also question earlier in a todo: needed? comment last time whether output {} reset was also needed, but they removed it and assumed it as needed.

[menisy]

I'm facing the same issue, the transition animation works fine while the page loads, but stops working afterwards. After some debugging it seems that loading bootstrap.css is the culprit. I tried removing
[hidden] { display: none !important; }
as @Glidias mentioned but with no luck.
@Hamlet89 did you find a solution for this yet?

[stevedesmond-ca]

Adding

[hidden] {
  display: inherit !important;
}

to your own CSS (loaded after bootstrap) fixes this.

[bertoost]

For anyone coming here and having issues... You also have to disable the tansistions include in Bootstrap

//@import "transitions";

Better to overwrite this as well, but I'm not that skilled 🙈