从 Firebase 检索不同数据时的动画

Question

我目前正在开发一个 AngularJS 应用程序。该应用程序向用户提出问题，然后用户可以回答是或否。显示的是或否列，并且根据用户是否回答是或否，在每一列中显示新的问题。一旦用户点击列中的新问题，它就会成为主要问题，并重复该过程。

问题是当从数据库中获取不同的数据时，数据会立即发生变化，使用户感到困惑。有没有办法让旧数据淡出，数据淡入？或者我可以使用某种动画来使问题之间的转换更加用户友好？

    <article class="post featured">
      <header class="major">
        <h2 ng-cloak>{{main.Q}}</h2>
        <h3 ng-show="main.s1.name !== 'emp' && main.s2.name !== 'emp' && main.s3.name !== 'emp'" >Sources</h3>
    
        <h3 ng-show="main.s1.name === 'emp' && main.s2.name === 'emp' && main.s3.name === 'emp'">No Sources to Link</h3>
                                            
        <ul class="actions" ng-cloak>
            <li><a ng-show="main.s1.name !== 'emp'" href="{{main.s1.name}}" class="button big">{{main.s1.link}}</a></li>
            <li><a ng-show="main.s2.name !== 'emp'" href="{{main.s2.name}}" class="button big">{{main.s2.link}}</a></li>
            <li><a ng-show="main.s3.name !== 'emp'" href="{{main.s3.name}}" class="button big">{{main.s3.link}}</a></li>
        </ul>
    
        <div class="row" style="border:6px solid rgb(38, 42, 56); overflow:auto; height:auto">
          <div class="column">
            <h2>YES</h2>
            <a ng-show="main.y1 !== 'emp'" ng-click="goto(main.y1)">{{data[main.y1].Q}}</a><br><br>
            <a ng-show="main.y2 !== 'emp'" ng-click="goto(main.y2)">{{data[main.y1].Q}}</a><br><br>
            <a ng-show="main.y3 !== 'emp'" ng-click="goto(main.y3)">{{data[main.y1].Q}}</a><br><br>
        </div>
        <div class="column" style="background-color:rgb(247, 247, 247)">
            <h2>NO</h2>
            <a ng-show="main.n1 !== 'emp'" ng-click="goto(main.n1)">{{data[main.n1].Q}}</a><br><br>
            <a ng-show="main.n2 !== 'emp'" ng-click="goto(main.n2)">{{data[main.n2].Q}}</a><br><br>
            <a ng-show="main.n3 !== 'emp'" ng-click="goto(main.n3)">{{data[main.n3].Q}}
            </a><br><br>
        </div>
        <br><br>
        </div>
      </header>
    </article>

Answer 1

<script>
 $(document).ready(function(){
 $(".btn1").click(function(){
    $("h2").fadeOut();
    $("h2").fadeIn()
  });
 });
</script>

然后只将 class="btn1" 添加到更改数据的按钮上。