Этот сначала не скрыт:
The last sentence should be hidden at first. When it is revealed, it should be highlighted at the same time. <span class = "fragment highlight-red">But as you can see, it isn't hidden at all.</span>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css" rel = "stylesheet" />
<link href = "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/theme/simple.min.css" rel = "stylesheet" />
<div class = "reveal"><div class = "slides"><section>
The last sentence should be hidden at first. When it is revealed, it should be highlighted at the same time. <span class = "fragment highlight-red">But as you can see, it isn't hidden at all.</span>
</section></div></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js"></script>
<script>Reveal.initialize();</script>Этот ближе. Сначала он скрыт, но когда он открывается, он становится черным, и требуется еще один щелчок, чтобы он стал красным:
The last sentence should be hidden at first. When it is revealed, it should be highlighted at the same time. <span class = "fragment"><span class = "fragment highlight-red">But as you can see, when it reveals it isn't highlighted right away.</span></span>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css" rel = "stylesheet" />
<link href = "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/theme/simple.min.css" rel = "stylesheet" />
<div class = "reveal"><div class = "slides"><section>
The last sentence should be hidden at first. When it is revealed, it should be highlighted at the same time. <span class = "fragment"><span class = "fragment highlight-red">But as you can see, when it reveals it isn't highlighted right away.</span></span>
</section></div></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js"></script>
<script>Reveal.initialize();</script>Есть ли способ добиться того, чего я хочу, как описано в тексте демо-версии?
🤔 А знаете ли вы, что...
JavaScript можно использовать для создания видеоигр, как 2D, так и 3D, с использованием библиотеки Three.js.
Поведение фрагментов по умолчанию — постепенное появление посредством анимации свойства opacity CSS. Такие классы, как highlight-red, также влияют на свойство opacity (устанавливая для него значение 1), поэтому вы не получите желаемого поведения при применении обоих классов fragment и highlight-red.
Использование вложенных fragment, как вы и предполагали во втором фрагменте, приводит к их последовательному применению, как описано здесь.
Кажется, что самый простой способ получить желаемое поведение — это определить собственный фрагмент:
.fragment.red {
color: red;
}<link href = "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/reveal.min.css" rel = "stylesheet" />
<link href = "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/css/theme/simple.min.css" rel = "stylesheet" />
<div class = "reveal">
<div class = "slides">
<section>
The next sentence should be hidden at first.
<span class = "fragment custom red">
But when it is revealed, it should be highlighted.
</span>
</section>
</div>
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0/js/reveal.min.js"></script>
<script>
Reveal.initialize();
</script>