stan288

.block-1:hover + .block-2 - непосредственно следующий блок
.block-1:hover ~ .block-2 - все следующие сиблинги

Проблема заключается в том, что при быстрых кликах на кнопку, очередные вызовы функции `translateY()` начинаются еще до того, как завершится предыдущая анимация (и соответственно, "transitionend" не успевает сработать). Это приводит к созданию множества слушателей события transitionend на одном элементе, что затрудняет правильную работу анимации при последующих кликах.

Для решения этой проблемы можно добавить проверку наличия класса "translate" на элементе, перед добавлением его на кнопку. Если класс уже присутствует, то следует пропустить выполнение функции и не добавлять новый слушатель события transitionend:

function translateY(e) {
  if (!e.classList.contains('translate')) {
    e.classList.add('translate');
    e.addEventListener('transitionend', function handler() {
      e.classList.remove('translate');
      e.removeEventListener('transitionend', handler);
    });
  }
}

В этом коде мы проверяем, не содержится ли наш элемент класса "translate" перед добавлением этого класса. Далее, если класса нет, то мы добавляем слушатель события transitionend, и при завершении анимации удаляем слушатель и удаляем класс "translate" с элемента.

Такой подход обеспечивает правильную работу анимации при быстрых кликах на кнопку.

Отмечу, что в целом, использование js для реализации простой анимации как в данном примере может считаться избыточным. В большинстве случаев, на такие анимации можно обойтись использованием только css (как вы и отметили, через псевдоклассы, например :active).

По одной из первых ссылок в Гугле советуют заменить add() и remove() на toogle(). Попробовал - мне помогло. Даже нажатие кнопкой двойного клика не "вешает" кнопку.

Не могу сказать за Python, но не уверен, что вы правильно понимаете его механизм await. Сомневаюсь, что он продолжает выполнять текущий исполняемый поток после await, т.к. это нарушит исполение кода.
Про JS могу сказать, что вы видимо не до конца понимаете какой код будет исполнен действительно асинхронно, а какой последовательно (т.е. блокируя основной поток).

const axios = require('axios')

async function doReq1(){
    const res = await axios.get('http://localhost:12000?id=1')
    return res
}

async function main(){
    doReq1().then((data) => {
        console.log(data.data)
        console.log("After req")
    });
    console.log("Before req")
}
main()

Данный код выведет 1) Before req 2) Hello 1! 3) After req
Т.е. AfterReq будет исполнен после того как асинхронная операция получит результат, т.е. подождет (await) результата.
Аналогичный код с await

const axios = require('axios')

async function doReq1(){
    const res = await axios.get('http://localhost:12000?id=1')
    return res
}

async function main(){
    console.log("Before req")
    let res = await doReq1()
    console.log(res.data)
    console.log('After req')
}

main()

Разницы нет, в том числе в твоём описании.
Текущая корутина при await-вызове приостанавливается, её состояние сохраняется.
При этом реактор может заниматься другими вещами (в частности, выполнением await-вызова).
Когда await-вызов завершиться, состояние корутины будет восстановлено, и она продолжит выполнение.