Анимированое удаление
Здраствуйте, помогите пожалуйста понять почему не работает анимированое удаление в коде
<!DOCTYPE html>
<body>
<div class="container">
<div id="del" onclick="del()"></div>
</div>
</body>
<style>
.container {
width: 30vmin;
background: green;
transition: all 5s ease;
}
#del {
width: 10vmin;
height: 10vmin;
background: red;
}
</style>
<script>
function del() {
document.getElementById("del").style = "display:none";
}
</script>
</html>
И как ето реализовать (я представляю еот как резкое исчезновение красного квадрата и медленное уменшение зеленого) |
fori,
анимировать можно только значения с циферками |
Тоесть в моем случае есть смысл использовать position:absolute, измерить чему равно height дочернео елемента и передавать (его+margins) в родительский-анимируемый div?
Как я могу получить значение height из под js (могу ли я получить значение в vmin, [если все что внутри етого дочернего компонента имеет размер в vmin] или только в px) Если только в пикселях как мне реагировать на изменение масштаба (чтоб не зависимо от масштаба размеры не менялись) PS: проблемы таких требований к верстке вызваны тем что ето игровой интерфейс а не просто сайт)) |
Можно навертеть - скрывать через transform, или там opacity, что не затрагивает реальных размеров, а потом медленно уже сводить сам размер к нулю, после чего удалять. Т.е. заявзать всю анимацию на сам удаляемый элемент.
Получить же высоту можно как el.offset\client\scrollHeight либо el.getBoundingClientRect().height, либо getComputedStyle(el).height, в зависимости от того что нужно. Всегда исключительно в прикселях. Но нет никаких проблем привести значение на момент вызова к vmin или любому другому - простая математика. |
| Часовой пояс GMT +3, время: 02:19. |