Группа перехода Vue не анимируется должным образом, когда первый элемент списка соединяется со списком
Я изо всех сил пытаюсь понять, почему моя группа перехода не анимируется должным образом при удалении первого элемента из списка. Сначала я попытался создать минимальный воспроизводимый пример, чтобы поделиться им на своей локальной машине, и у меня все получилось. Затем я скопировал тот же код в CodeSandbox, чтобы поделиться им со StackOverflow, но по какой-то причине проблема больше не существует.
Вот пример CodeSandbox , который работает правильно, а вот запись того же кода, который вызывает проблему при обслуживании на моем локальном компьютере.
В записи вы увидите, что первые два элемента удалены правильно. Они переводятся вправо и исчезают, а последующие элементы плавно переходят вверх, заполняя пустое пространство.
Однако, когда я удаляю первый элемент при следующих двух щелчках, оставшийся элемент переходит правильно, но последующие элементы мгновенно перескакивают .
Проблема возникает в Chrome, Firefox и IE. Есть идеи, почему он работает правильно в CodeSandbox, но не на моей машине, несмотря на аналогичный код?