使用 AngularJS 为测验应用程序制作动画答案

【问题标题】：Animate a quizz app with AngularJS使用 AngularJS 为测验应用程序制作动画
【发布时间】：2017-07-15 04:08:00
【问题描述】：

我做了一个测验应用程序，但我想添加一些动画就像淡入/淡出一样，当单击上一个/下一个按钮时。任何一个都可以帮我做同样的事情。需要更改 css 需要更改 CSS 需要更改 css 需要更改 css 吗？

* {}

body {}

.question {
  width: 70%;
  margin: 0 auto;
  height: auto;
  display: block;
  background: #eeeeee;
}

.question h1 {
  text-align: center;
  padding-top: 30px;
  color: #666666;
}

.question h2 {
  width: 100%;
  font-size: 22px;
  color: #0c1e5c;
  padding: 1% 3% 0% 3%;
}

.question ul:nth-child(odd) {
  background: #d0dff6;
  width: 30%;
  padding: 8px;
  margin: 1% 9%;
  display: inline-block;
  color: #0c1e5c;
}

.question ul:nth-child(even) {
  background: #d0dff6;
  width: 30%;
  padding: 8px;
  margin: 1% 9%;
  display: inline-block;
  color: #0c1e5c;
}

.button {
  text-align: center;
  margin: 1% 0;
}

.btn {
  background: #8bf8a7;
  padding: 5px;
}

<html ng-app="quiz">

<head>
  <meta charset="utf-8">
  <title>Basic Quiz</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body ng-controller="quizCtrl">
  <div class="question">
    <h1>QUIZ APPLICATION</h1>
    <h2>{{questions.question}}</h2>
    <ul ng-repeat="option in questions.options">
      <li style="list-style:none">
        <input type="{{buttonType}}">{{option.text}}</li>
    </ul>
  </div>
  <div class="button">
    <input type="button" value="previous" class="btn" ng-show="isPrevious" ng-click="previousQuestion()">
    <input type="button" value="next" class="btn" ng-show="isNext" ng-click="nextQuestion()">
  </div>
</body>
<script>
  var app = angular.module("quiz", [])
  app.controller("quizCtrl", function($scope) {
    $scope.data = [{
        question: "1)Which of the following selector matches a element based on its id?",
        type: "single",
        options: [{
            text: "The Id Selector"
          },
          {
            text: "The Universal Selector"
          },
          {
            text: "The Descendant Selector"
          },
          {
            text: "The Class Selector"
          }
        ]
      },
      {
        question: "2)Which of the following defines a measurement as a percentage relative to another value, typically an enclosing element?",
        type: "multiple",
        options: [{
            text: "%"
          },
          {
            text: "cm"
          },
          {
            text: "percentage"
          },
          {
            text: "ex"
          }
        ]
      },
      {
        question: "3)Which of the following property is used to set the background color of an element?",
        type: "single",
        options: [{
            text: "background-color"
          },
          {
            text: "background-image"
          },
          {
            text: "background-repeat"
          },
          {
            text: "background-position"
          }
        ]
      },
      {
        question: "4)Which of the following is a true about CSS style overriding?",
        type: "multiple",
        options: [{
            text: "Any inline style sheet takes highest priority. So, it will override any rule defined in tags or rules defined in any external style sheet file."
          },
          {
            text: "Any rule defined in tags will override rules defined in any external style sheet file."
          },
          {
            text: "Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable."
          }
        ]
      }
    ];
    $scope.index = 0;
    $scope.questions = $scope.data[$scope.index];
    $scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
    $scope.isPrevious = false;
    $scope.isNext = true;
    $scope.nextQuestion = function() {
      if ($scope.index < 3) {
        $scope.index = $scope.index + 1;
        $scope.questions = $scope.data[$scope.index];
        $scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
        $scope.isPrevious = true;
        if ($scope.index == 3) {
          $scope.isNext = false;
        }
      } else {
        // disble next botton logic
        $scope.isNext = false;
      }
    }

    $scope.previousQuestion = function() {
      if ($scope.index > 0) {
        $scope.index = $scope.index - 1;
        $scope.questions = $scope.data[$scope.index];
        $scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
        $scope.isNext = true;
        if ($scope.index == 0) {
          $scope.isPrevious = false;
        }
      } else {
        // disble next botton logic
        $scope.isPrevious = false;
      }
    }

  });
</script>

</html>

【问题讨论】：

标签： css angularjs animation

【解决方案1】：

查看ng-animate，基本上它的作用是添加您可以在显示 dom 和隐藏 dom 时相应设置样式的类，如下所示：

/* The starting CSS styles for the enter animation */
.fade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}

要使用该功能，您必须在 html 中使用 ng-repeat，如下所示：

<div ng-repeat="item in data" ng-if="index === $index">
    //Your question html here
</div>

其中 data 和 index 是 $scope.data 和 $scope.index。

这将是做事的角度方式。

但是我看到您使用的是相同的 div，只是更改了范围数据，这需要您设置

transition: 1s all ease;

在问题类上，然后在javascript中做这样的事情：

angular.element('.question').css('opacity', 0);
$timeout(function() {
    // change question..
    angular.element('.question').css('opacity', 1);
}, 1000);

【讨论】：