Jupyter笔记本幻灯片，新片段的外观如何触发先前片段的属性更改？ 代码：屏幕截图： 代码：

问题描述

使用Jupyter Notebook准备幻灯片，

我希望当新片段可见时，触发先前显示的片段的属性更改（例如，文本颜色或字体大小）。

如果需要addEventListener，您能否提供一个适用于Jupyter笔记本的示例？

解决方法

这是我发现的：

用id标记目标元素和触发元素：

代码：

<p id="target"> This text will become red and then green.</p>
<p class="fragment" id="trigger"> When this appears,the previous fragment will change color. When it disappears it will change color again</p>

屏幕截图：

我们需要添加一个事件监听器来监听'fragmentshown'事件。 事件监听器不能位于Jupyter单元中，因为在初始化Reveal之前已加载单元内容。

接下来将其转换为幻灯片（对于名为test.ipynb的笔记本）：

jupyter-nbconvert test.ipynb --to slides --post serve

接下来，使用文本编辑器打开幻灯片文件test.slides.html。在文件的底部，我们找到了包含Reveal初始化的require()函数。在其中（初始化之后）中添加以下命令：

代码：

Reveal.addEventListener('fragmentshown',function( event ) {
        if(event.fragment.id === 'trigger') {  document.getElementById("target").style.color = "red";}
} );
Reveal.addEventListener('fragmenthidden',function( event ) {
        if(event.fragment.id === 'trigger') {  document.getElementById("target").style.color = "green";}
} );