javascript - 从 Firebase 检索不同数据时动画

Question

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

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

    <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"添加到更改数据的按钮。