title: ui-router duplicating ui-view during a transition
body: <pre><code>&lt;html&gt;
  &lt;head&gt;
    [...]
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div ui-view=&quot;body&quot;&gt;
      &lt;header&gt;&lt;/header&gt;
      &lt;div ui-view=&quot;main&quot;&gt;
        Something you see while angular/templates load.
      &lt;/div&gt;
      &lt;footer&gt;&lt;/footer&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>stuff.js</p>
  <pre><code>var app = angular.module(&quot;app&quot;, ['ui.router']);
  app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('home', {
      url: '/',
      views: {
        &quot;main&quot;: {
          controller: 'HomeController',
          templateUrl: 'home.tpl.html'
        }
      }
    });
    $stateProvider.state('signin', {
      url: '/signin',
      views: {
        &quot;body&quot;: {
          controller: 'SigninController',
          templateUrl: 'signin.tpl.html'
        }
      }
    });
  }]);
  </code></pre>
  <p>I disabled javascript while making the state transition and this is what I see in the browsers inspector...</p>
  <pre><code>&lt;html&gt;
    [...]
    &lt;body&gt;
      &lt;div ui-view=&quot;body&quot;&gt;
        &lt;header&gt;[...]&lt;/header&gt;
        &lt;div ui-view=&quot;main&quot;&gt;[... home.tpl.html ...]&lt;/div&gt;
      &lt;/div&gt;
      &lt;div ui-view=&quot;body&quot;&gt;
        [... signup.tpl.html ...]
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I was shocked to see that ui-router actually duplicates the ui-view and creates one view before removing the old view.</p>
  <p>Obviously this causes the problem that a combination of <em>BOTH</em> views are showing for at least two seconds while navigating from <code>signin</code> to <code>home</code>.  This behavior is the same on all tested browsers.  Is there a way to tell/force/trick ui-router into completely removing the template of one view before loading another view?</p>
  <p>this is similar to: <a href="https://stackoverflow.com/questions/28792684/preventing-duplicate-ui-view-in-angularjs">Preventing duplicate ui-view in AngularJS</a> and the answer may apply to my situation as well.</p>
  <h3>EDIT</h3>
  <p>the first div had <code>class=&quot;ng-enter ng-enter-active&quot;</code> and the next one had <code>class=&quot;ng-leave ng-leave-active&quot;</code> answer follows from that.</p>