我有一个麻烦的任务。默认情况下应隐藏图像并显示按钮。我想显示图像和隐藏按钮,但是当一个动画结束时,第二个应该开始。过渡应持续 1 秒。如何制作?
所有代码: https://jsfiddle.net/169vuuk8/
HTML代码:
<div class="showSingle" itemprop="1">
<img src="https://img.thegearpage.net/board/data/avatars/m/47/47608.jpg?1487188345" alt="logo">
<button class="button">button </button>
</div>
最佳答案
看起来你只需要 transition-delay
第二个动画的 css 属性:https://developer.mozilla.org/en/docs/Web/CSS/transition-delay
你可以在 js 中使用 transitionend
事件,但这里并不需要它:https://developer.mozilla.org/en/docs/Web/Events/transitionend
关于Css 动画队列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44884613/