CSS - переопределение перехода как в определенное состояние, так и из него - PullRequest
Новая
       4

CSS - переопределение перехода как в определенное состояние, так и из него

1 голос
/ 10 марта 2020

Предположим, у меня есть простая кнопка с переходом:

<button id="myBtn" type="button">Button A</button>

#myBtn {
  transition: background-color 1s;
}

Выше CSS Я не могу коснуться, потому что переход необходим другим javascript - управляемые эффекты. Но я бы хотел присвоить этой кнопке другой bg при нажатии, и я бы хотел, чтобы это изменение цвета происходило без перехода. Естественно, это: 

#myBtn {
  transition: background-color 1s;
}
#myBtn:active {
  transition: background-color 0s;
  background-color: red;
}

Но это, конечно, отключает переход только тогда, когда кнопка переходит в состояние :active, а не когда она возвращается из нее. Другими словами, когда пресс отпускается, исходный цвет восстанавливается с переходом 1с, тогда как я хочу, чтобы он восстановился немедленно. Поэтому мой вопрос заключается в том, есть ли способ переопределить переход как в конкретное состояние, так и из него в CSS?

PS

Я знаю, что могу сделать это в JS , что-то вроде: 

btn.onmouseup(() => {
  btn.style.transition = "background-color 0s";
  setTimeout(() => btn.style.transition = "", 10);
  // Actually this doesn't even work because DOM can't react in 10ms
});

Мне просто интересно, можно ли сделать это более понятным и менее уродливым способом (т.е. чисто HTML & CSS).

1 Ответ

0 голосов
/ 10 марта 2020

Вы можете добавить визуальный оверлей, который виден только при активной кнопке: 

    
    #myBtn {
      transition: background 1s;
      position: relative;
    }
    #myBtn:before {
      content: "Button";
      visibility: hidden;
      position: absolute;
      top:0;bottom:0;left:0;right:0;
    }
    #myBtn:active:before {
      visibility: visible;
      background-color: red;
    }
<button id="myBtn">Button</button>
...