Как сделать так, чтобы фрагмент одновременно появлялся и выделялся красным?
Этот сначала не скрыт:
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>Есть ли способ добиться того, чего я хочу, как описано в тексте демо-версии?
Второй фрагмент будет отображать описанное поведение, если ко второму fragment будет добавлен класс span.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Поведение фрагментов по умолчанию — постепенное появление посредством анимации свойства 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>почему .fragment.red работает? Я думал, между ними должно быть пространство (.fragment .red)?
Это составной селектор , а не комбинатор потомков.
значит, .fragment .red с пробелом не является составным? Я прочитал это, и кажется, что составной элемент будет соответствовать только тегам, имеющим все селекторы. Значит, несоставной элемент будет соответствовать тегам, если у них есть один или несколько совпадающих селекторов?
Исправьте свои первые два утверждения. Для последнего, то есть «сопоставить теги, если у них есть один или несколько совпадающих селекторов», вам понадобится список селекторов.
хм, похоже, я путаю несоставной селектор (разделенный пробелами) и список селекторов (разделенный запятыми). Последний соответствует одному или нескольким селекторам. Тогда что делает первый?
Это комбинатор-потомок, см. ссылку выше.
Я добавил исполняемые фрагменты (исходя из структуры ответа; я не совсем знаком с Reveal). Обратите внимание, что второй не воспроизводит описанное вами поведение, поэтому вы можете его настроить.