This is my setup. I want content to be hidden just above the top, then on demand animate it to center. Obviously with following css opened class, this animation does not have desired effect (but content is centered when opened class is added).
Can I achieve this with css or I need javascript?
var content = document.querySelector('.content')
document.querySelector('#toggle').addEventListener('click', function() {
if (content.classList.contains('opened')) {
content.classList.remove('opened')
} else {
content.classList.add('opened')
}
}).wrap {
position: relative;
width: 300px;
height: 300px;
background: #ddd;
overflow: hidden;
}
.content {
position: absolute;
bottom: 100%;
transition: all 0.5s;
}
.opened {
transform: translateY(-50%);
bottom:auto;
top:50%;
}
#toggle {
position: absolute;
top: 0;
left: 340px;
}<div class="wrap">
<div class="content">
Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem. Curabitur dignissim nunc id arcu. Nulla facilisi.
</div>
</div>
<a href="#" id="toggle">toggle</a>