css - 动画填充模式中断位置固定

Question

我有一个元素，它出现在带有淡入动画的页面中。单击元素时，元素会在整个页面上覆盖（类似于模态）。它在除 Firefox 之外的所有浏览器中都能正常工作。

删除animation-fill-mode: both解决了这个问题，但我需要这个属性。

const element = document.getElementById('element');
let isClicked = false;

element.addEventListener('click', handleClick, false);

function handleClick() {
	if (isClicked) {
  	element.classList.add('isVisible');
  } else {
  	element.classList.remove('isVisible');
  }
  
  isClicked = !isClicked;
}

.element {
  width: 200px;
  height: 40px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation-delay: 100ms;
  animation-timing-function: ease;
  animation-duration: 200ms;
  animation-name: fadeIn;
  /* animation-fill-mode: both; */
}

.isVisible {
 ::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: tomato;
    z-index: -1;
    animation-timing-function: ease;
    animation-duration: 300ms;
    animation-name: fadeIn;
  } 
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

<div class="element" id="element">
  <p>
    element
  </p>
</div>

标签： css

Answer 1

请为此添加动画延迟..它可能会起作用。

css

.element {
    animation-delay: 1s;
}