Принятый ответ работает в большинстве случаев, но он не работает, когда ваш div
может сильно различаться по высоте - скорость анимации не зависит от фактической высоты содержимого и может выглядеть прерывисто.
Вы все еще можете выполнять фактическую анимацию с помощью CSS, но вам нужно использовать JavaScript для вычисления высоты элементов, вместо того, чтобы пытаться использовать auto
. JQuery не требуется, хотя вам, возможно, придется немного изменить его, если вы хотите совместимости (работает в последней версии Chrome:)).
window.toggleExpand = function(element) {
if (!element.style.height || element.style.height == '0px') {
element.style.height = Array.prototype.reduce.call(element.childNodes, function(p, c) {return p + (c.offsetHeight || 0);}, 0) + 'px';
} else {
element.style.height = '0px';
}
}
#menu #list {
height: 0px;
transition: height 0.3s ease;
background: #d5d5d5;
overflow: hidden;
}
<div id="menu">
<input value="Toggle list" type="button" onclick="toggleExpand(document.getElementById('list'));">
<ul id="list">
<!-- Works well with dynamically-sized content. -->
<li>item</li>
<li><div style="height: 100px; width: 100px; background: red;"></div></li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
Бобы по умолчанию не ленивы. Однако, что касается аннотаций, похоже, что в настоящее время аннотации не поддерживают его. http://forum.springsource.org/showthread.php?t=62931
Следующая версия Spring, похоже, уже кое-что припасла http://jira.springframework.org/browse/SJC-263
В Spring 3.0 есть аннотация: @Lazy(false)
. Но обратите внимание, что бобы по умолчанию нетерпеливы.