Beamer-like overlays in Bookdown presentation

Question

Is it possible use beamer-like overlays in Bookdown?

I want similar like \only<...> and \visible<...> in Beamer, for example (MWE):

\documentclass{beamer}
\begin{document}
\begin{frame}
  First
  \visible<2->{second}
  \visible<3->{third}

  {\only<1>{\color{red}} First}
  {\only<2>{\color{red}} \visible<2->{second}}
  {\only<3>{\color{red}} \visible<3->{third}}
\end{frame}
\end{document}

My target is create an online HTML-presentation (ioslides, slidy or any other, it's unimportant) and a downloadable PDF from same source. These presentations will be educational presentations (maths) which shows step-by-step solution of some exercise (calculation and explanation at once).

How can I do this simply?

Answer 1

One solution is use reveal.js with its fragments:

Fragments are used to highlight or incrementally reveal individual elements on a slide. Every element with the class fragment will be stepped through before moving on to the next slide.

A simple MWE:

---
title: "Reveal.js Fragments test"
output: revealjs::revealjs_presentation
---
# First frame
::: {.element: class="fragment" data-fragment-index="1"}
::: {.element: class="fragment highlight-current-red" data-fragment-index="2"}
test text
$a^2+b^2=c^2$
:::
:::

::: {.element: class="fragment" data-fragment-index="2"}
now red
:::

::: {.element: class="fragment" data-fragment-index="3"}
now not red
:::

::: {.element: class="fragment" data-fragment-index="2"}                                                                                             
with second element                                                                                                                                  
:::