个人中心
gpt4 book ai didi

css - 使用 AngularJS 为测验应用制作动画

转载 作者：行者123 更新时间：2023-11-28 04:17:01 26 4
gpt4 key购买 nike

我做了一个测验应用程序，但我想添加一些动画当单击上一个/下一个按钮时，如淡入/淡出。任何人都可以帮我做同样的事情。需要更改 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>

最佳答案

查看 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>

其中数据和索引是 $scope.data 和 $scope.index。

那将是 Angular 做事方式。

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

transition: 1s all ease;

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

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

关于css - 使用 AngularJS 为测验应用制作动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42436720/

26 4 0
文章推荐： c++ - 从理论上讲，仅在动态分配中使用内存范围的意外重用来同步线程是否(错误地)合法？
文章推荐： javascript - 为什么 background-image 在 CSS 中比内联 background-color 具有更高的优先级？
文章推荐： jquery - 设置具有重叠边框的 div
文章推荐： c++ - 多维数组的算术运算
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com