title: Animating when retrieving different data from Firebase
body: <p>I'm currently working on an AngularJS app. The app asks the user a question, then the user can either answer yes or no. Displayed is yes or no columns, and in each column depending whether the user answered yes or no, there is displayed new questions. Once the user clicks on the new question in the column, it becomes the main the question, and the process repeats.</p>
  <p>The issue is that when getting different data from the database, the data changes instantly, making the user confused. Is there a way I can make the old data fade out and the data fade in? Or some sort of animation I can use to make the transitions between questions a bit more user friendly?</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;article class=&quot;post featured&quot;&gt;
        &lt;header class=&quot;major&quot;&gt;
          &lt;h2 ng-cloak&gt;{{main.Q}}&lt;/h2&gt;
          &lt;h3 ng-show=&quot;main.s1.name !== 'emp' &amp;&amp; main.s2.name !== 'emp' &amp;&amp; main.s3.name !== 'emp'&quot; &gt;Sources&lt;/h3&gt;
      
          &lt;h3 ng-show=&quot;main.s1.name === 'emp' &amp;&amp; main.s2.name === 'emp' &amp;&amp; main.s3.name === 'emp'&quot;&gt;No Sources to Link&lt;/h3&gt;
                                              
          &lt;ul class=&quot;actions&quot; ng-cloak&gt;
              &lt;li&gt;&lt;a ng-show=&quot;main.s1.name !== 'emp'&quot; href=&quot;{{main.s1.name}}&quot; class=&quot;button big&quot;&gt;{{main.s1.link}}&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a ng-show=&quot;main.s2.name !== 'emp'&quot; href=&quot;{{main.s2.name}}&quot; class=&quot;button big&quot;&gt;{{main.s2.link}}&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a ng-show=&quot;main.s3.name !== 'emp'&quot; href=&quot;{{main.s3.name}}&quot; class=&quot;button big&quot;&gt;{{main.s3.link}}&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      
          &lt;div class=&quot;row&quot; style=&quot;border:6px solid rgb(38, 42, 56); overflow:auto; height:auto&quot;&gt;
            &lt;div class=&quot;column&quot;&gt;
              &lt;h2&gt;YES&lt;/h2&gt;
              &lt;a ng-show=&quot;main.y1 !== 'emp'&quot; ng-click=&quot;goto(main.y1)&quot;&gt;{{data[main.y1].Q}}&lt;/a&gt;&lt;br&gt;&lt;br&gt;
              &lt;a ng-show=&quot;main.y2 !== 'emp'&quot; ng-click=&quot;goto(main.y2)&quot;&gt;{{data[main.y1].Q}}&lt;/a&gt;&lt;br&gt;&lt;br&gt;
              &lt;a ng-show=&quot;main.y3 !== 'emp'&quot; ng-click=&quot;goto(main.y3)&quot;&gt;{{data[main.y1].Q}}&lt;/a&gt;&lt;br&gt;&lt;br&gt;
          &lt;/div&gt;
          &lt;div class=&quot;column&quot; style=&quot;background-color:rgb(247, 247, 247)&quot;&gt;
              &lt;h2&gt;NO&lt;/h2&gt;
              &lt;a ng-show=&quot;main.n1 !== 'emp'&quot; ng-click=&quot;goto(main.n1)&quot;&gt;{{data[main.n1].Q}}&lt;/a&gt;&lt;br&gt;&lt;br&gt;
              &lt;a ng-show=&quot;main.n2 !== 'emp'&quot; ng-click=&quot;goto(main.n2)&quot;&gt;{{data[main.n2].Q}}&lt;/a&gt;&lt;br&gt;&lt;br&gt;
              &lt;a ng-show=&quot;main.n3 !== 'emp'&quot; ng-click=&quot;goto(main.n3)&quot;&gt;{{data[main.n3].Q}}
              &lt;/a&gt;&lt;br&gt;&lt;br&gt;
          &lt;/div&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;/div&gt;
        &lt;/header&gt;
      &lt;/article&gt;
  </code></pre>