Hoqus

Чуть поправил, так что теперь можете оттолкнуться от моей демки.
Почему не анимировалось на iphone информации нет. Скорее всего потому что менялась высота внутри flex.
Ну и в целом анимировать высоту, так же как и ширину - считается не самым лучшим делом в вебе.
Погуглите на тему "производительные анимации". Или "свойства, безопасные для анимации".
Плюс элементы на самом деле не помещались в свой контейнер, но это было не заметно на глаз, так как флекс без врапа.

infoInputs = document.querySelectorAll(".input-class") // Получем все input через класс
for(var i=0; i < Object.keys(infoInputs).length; i++) { // Задаем цикл, чтобы проверить всех
    if(infoInputs[i].value.length != 0) { // если длина значения не равна нулю
        fulledInputs += 1 // прибавляем что этот инпут заполнен
    }
if (fulledInputs < 4) { // если заполненых инпутов меньше 4
    console.log(false) // выводим false
} else { // в других случаях
    console.log(true) // выводим true
}