当另一个按钮已经被点击时，如何才能使 div 仅 'activate'？

Question

我想弄清楚如何让弹出窗口仅在单击按钮后显示。我在计时器上有一个弹出窗口 div，但我只想在单击此按钮后启动计时器。有没有人对我如何实现这一目标有任何想法？

所以我在顶部有这个按钮可以打开这个框，其中包含一个自动播放的 HTML5 视频；并且我希望其中带有弹出窗口的 div 仅在单击该按钮后启动其显示时间的计时器（以便播放视频）。

<button class="modal-open" >Begin Experience</button>
<div class="modal-box">
  <video class="fs-video" preload="auto" >
    <source  class="fs-video"  src="videos/scene1_option1a.mp4"  type="video/mp4" > 
    </video>    
</div>

<!--This is the popup code -->
    <div class="timer">
        <div class="modal">
        <p class="message">Look at this fancy pop-up</p>
            <div class="options">
                    <a href="test.html">
                <button class="btn">Yes</button>
                    </a>
                    <a href="test.html">
                <button class="btn">No</button>
                    </a>            
            </div>
        </div>      
    </div>  
<!--end of popup code -->

这是我用来制作计时器的css：

.timer{
    animation: cssAnimation 0s 5s forwards;
    visibility: hidden;
}

@keyframes cssAnimation {
  to   { visibility: visible; }
}

这对任何人都有意义吗？非常感谢！

Answer 1

有些属性不是 "transitionable" - 例如，可见性只有 2 个状态 - 可见或隐藏，没有介于两者之间的比例。这样的动画不会有预期的效果。

通过使用不透明度，您可以确保干净的过渡，因为可以增加不透明度属性。

只要 JavaScript 一点点，您就可以听到对按钮的点击。

let button = document.querySelector( "#button" );

button.addEventListener( "click", function( e ) {
  
  let timer = document.querySelector( ".timer" );
  timer.classList.toggle( "active" );
  
});

.timer {
  opacity: 0;
}

.timer.active {
  animation: cssAnimation 1s forwards;
}

@keyframes cssAnimation {
  from {
    opacity: 0;
  }
  
  to {
    opacity: 1;
  }
}

<button class="modal-open" id="button">Begin Experience</button>
<div class="modal-box">
  <video class="fs-video" preload="auto" >
    <source  class="fs-video"  src="videos/scene1_option1a.mp4"  type="video/mp4" > 
  </video>    
</div>

<!--This is the popup code -->
<div class="timer">
  <div class="modal">
    <p class="message">Look at this fancy pop-up</p>
    <div class="options">
      <a href="test.html">
        <button class="btn">Yes</button>
      </a>
      <a href="test.html">
        <button class="btn">No</button>
      </a>            
    </div>
  </div>      
</div>  
<!--end of popup code -->

当另一个按钮已经被点击时，如何才能使 div 仅 'activate'？

How can I make a div only 'activate' when another button has already been clicked?

html

css

video

timer

popup