if/else works but if alone not working

[Falieson]

the longMessage helper workers properly but when the showContent helper is true the item just appears - it doesn't do an animation, and if I set showContent to false the content doesn't remove its self from the display and then when showContent is true again the content is duplicated.

  <div class="row z-depth-1" style="background-color: white; margin-top: 0; padding: 10px 2px;">
    {{#transition in="fadeIn:1500" out="fadeOut"}}
      {{#if longMessage}}
        <div class="center">
          <h1 style="text-align: center;">
            Welcome to the Engine
          </h1>
          <a id="showContent" class="btn" style="">Create your Admin Account</a>
        </div>
      {{else}}
        <h1 style="text-align: center;">
          Welcome
        </h1>
      {{/if}}
    {{/transition}}
  </div>
  <div class="row">
    <div class="col s12 m6 offset-l2 l4">
      {{#transition in="flipInLeft:1500" out="flipOutRight"}}
        {{#if showContent}}
          {{> rcSidebar}}
        {{/if}}
      {{/transition}}
    </div>
    <div class="col s12 m6 l4">
      {{#transition in="flipInRight:1500" out="flipOutLeft"}}
        {{#if showContent}}
          {{> rcSidebar}}
        {{/if}}
      {{/transition}}
    </div>
  </div>

[Falieson]

For now the solution seems to be doing something like this:

      {{#transition in="slideInRight:1500" out="slideOutRight"}}
        {{#if showContent}}
          {{> rcForm}}
        {{else}}
          <div style="display: none;">empty</div>
        {{/if}}
      {{/transition}}