Animate a div between logged in and not logged in

help
1

Hello there!

I’m having a small problem / question.

My code looks like this

{{#if currentUser}}
    <div class="header"></div>
{{else}}
    <div class="header small"></div>
{{/if}}

.header{
    height: 100px;
    transition: 0.5s;
}
.small{
     height: 50px;
}

This doesnt seem to work, the div does not get animated.

How do i solve this problem?

2

Meteor’s conditional helpers add/remove DOM elements, which diverges from the more ‘conventional’ behavior you’d expect where all elements are present in DOM and being mutated by css classes etc.

the easiest way to achieve this conventional behavior, at least in this use case, would be to move the conditional block into the tag’s class attribute:

<div class="header {{#unless currentUser}}small{{/unless}}"></div>

this would cause the div to have a “small” class when user is not logged in, resulting in a css transition (as the element is always in the DOM)

3

It’d be nice if Blaze was smarter and would detect the difference (similar to React) and it would therefore realize that it’s the same div but with or without a class.