Как правильно показывать и скрывать элемент (Animate.css)?

Изучаю Animate.css, получилось реализовать большинство задумок с анимацией, но встала проблема со следующей задачей:

- По умолчанию потомок скрыт, при наведение на родителя - потомку присваивается класс анимации и класс opened (отменяет режим 'скрытия').
- Название класса анимации берется из data самого потомка.

Вопрос: как грамотнее реализовать появление и скрытие потомка при hover родителя используя Animate.css? Хочется наглядно увидеть, как напишут всю логику работы скрипта люди с опытом...

UPD: У меня например не получилось в конце обратно скрывать потомка...

Код на CodePen.io