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 =＆＃34; btn1＆＃34;到更改数据的按钮。

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

1 个答案: