html - 从最后一个状态开始动画它结束 CSS

标签 html css angularjs css-animations 

var app = angular.module('dialApp', ['ngAnimate']);

angular.module('dialApp').controller('MainController',['$scope', function ($scope) {
  $scope.test = 'Test';

  $scope.left = false;
  $scope.right = false;
  $scope.bottom = false;
  $scope.leftRotate = function () {
    $scope.left = true;
    $scope.right = false;
    $scope.bottom = false;
  }

  $scope.rightRotate = function () {
    $scope.left = false;
    $scope.right = true;
    $scope.bottom = false;
  }

  $scope.bottomRotate = function () {
    $scope.left = false;
    $scope.right = false;
    $scope.bottom = true;
  }

}]);
body {
  height: 100%;
}

.container {
  padding: 0px;
  margin: 0px;
  height: 100%;
}

.panel-default {
  border-color: #EFF7FA;
}

.panel-default > .panel-heading {
  text-align: justify;
  font-size: large;
  background-color: #EFF7FA;
}

.panel-body {
  background-color: #E7F0F4;
  height: 100%;
}

.circle {
  background-color: white;
  border: 3px solid #ffa003;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  -webkit-transition: background-color 1s ease-out, transform 1s ease-out;
  -moz-transition: background-color 1s ease-out, transform 1s ease-out;
  -o-transition: background-color 1s ease-out, transform 1s ease-out;
  transition: background-color 1s ease-out, transform 1s ease-out;
}

.circle:hover {
  background-color: #ffa003;
  cursor: pointer;
  -ms-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  /* IE 9 */
  -webkit-transform: scale(1.1, 1.1);
  /* Safari */
  transform: scale(1.1, 1.1);
  /* Standard syntax */
}

.active-circle {
  background-color: #ffa003;
  cursor: pointer;
  -ms-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  /* IE 9 */
  -webkit-transform: scale(1.1, 1.1);
  /* Safari */
  transform: scale(1.1, 1.1);
  /* Standard syntax */
}

.p-1 {
  float: left;
  line-height: 30px;
  vertical-align: middle;
  margin-right: 10px;
}

.p-2 {
  float: left;
  line-height: 30px;
  vertical-align: middle;
  margin-left: 10px;
}

.center-element {
  margin: auto;
  text-align: center;
}

.image-container {
  position: relative;
  /* margin-left: -120px; */
  width: 100%;
  text-align: center;
}

.dial {
  height: 120px;
  width: 120px;
  position: relative;
  z-index: 1;
  /*top: 25px;*/
  /*animation: rotate 60s infinite steps(60);*/
}


.dial:before {
  background-image: url('http://i.imgur.com/GmzAbGi.png');
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  height: 25px;
  width: 50px;
  top: -19%;
  right: 29%;
}

.dailKnob {
  position: absolute;
  z-index: 3;
  height: 60px;
  width: 60px;
  top: 25%;
  left: 170px;
}

.arrow {
  position: absolute;
  z-index: 1;
  left: 43%;
  /*animation: rotate 60s infinite steps(60);*/
}

.rotate90 {
  -webkit-animation: rotate90d 1.0s forwards;
  -webkit-animation-fill-mode: forwards;
  -moz--animation: rotate90d 1.0s forwards;
  -moz--animation-fill-mode: forwards;
  -o-animation: rotate90d 1.0s forwards;
  -o-animation-fill-mode: forwards;
  -ms-transform: rotate(90deg) scale(1.3);
  -ms-animation-fill-mode: forwards;
}

.rotate180 {
  -webkit-animation: rotate180d 1.0s forwards;
  -webkit-animation-fill-mode: forwards;
  -moz--animation: rotate90d 1.0s forwards;
  -moz--animation-fill-mode: forwards;
  -o-animation: rotate90d 1.0s forwards;
  -o-animation-fill-mode: forwards;
  -ms-transform: rotate(90deg) scale(1.3);
  -ms-animation-fill-mode: forwards;
  /*-webkit-transform: rotate(180deg) scale(1.3);
  -moz-transform:    rotate(180deg) scale(1.3);
  -o-transform:      rotate(180deg) scale(1.3);
  -ms-transform:     rotate(180deg) scale(1.3);*/
}

.rotate270 {
  -webkit-animation: rotate270d 1.0s forwards;
  -webkit-animation-fill-mode: forwards;
  -moz--animation: rotate90d 1.0s forwards;
  -moz--animation-fill-mode: forwards;
  -o-animation: rotate90d 1.0s forwards;
  -o-animation-fill-mode: forwards;
  -ms-transform: rotate(90deg) scale(1.3);
  -ms-animation-fill-mode: forwards;
  /*-webkit-transform: rotate(270deg) scale(1.3);
  -moz-transform:    rotate(270deg) scale(1.3);
  -o-transform:      rotate(270deg) scale(1.3);
  -ms-transform:     rotate(270deg) scale(1.3);*/
}


@keyframes rotate90d {
  100% {
    transform: rotateZ(90deg);
  }
}

@keyframes rotate180d {
  100% {
    transform: rotateZ(180deg);
  }
}

@keyframes rotate270d {
  100% {
    transform: rotateZ(270deg);
  }
}


.sides {
  margin-top: 7%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
<body ng-app="dialApp">
  <div class="container col-xs-12" ng-controller="MainController">
    <div class="panel panel-default" style="height: 100%">
      <div class="panel-heading">
        <p class="panel-heading">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor nunc, dapibus et est ut, maximus vehicula ipsum. Pellentesque orci purus, maximus eget eros eu, elementum mattis elit. Vivamus leo lacus, hendrerit id fringilla et, accumsan nec ligula.Ut pulvinar odio massa, vitae molestie eros consectetur non. Vivamus nunc lectus, consectetur id ullamcorper venenatis, rutrum in urna. Vestibulum at risus diam.
        </p>
      </div>
      <div class="panel-body">
        <div class="col-xs-12" style="margin-top: 10px;">
          <div class="col-xs-12 col-md-offset-3 col-md-6" style="height: 120px; margin-bottom: 60px;">
            <div class="col-xs-2 sides" >
              <b class="p-1">Yes </b>
              <div class="circle" style="float: left;" ng-class="{ 'active-circle' : left }" ng-click="leftRotate()"></div>
            </div>
            <div class="col-xs-8">
              <div class="image-container" style="width: 400px;">
                <!--  <img src="images/selectionArrow.png" class="arrow">-->
                <div class="dial center-element" ng-class="{'rotate270' : left ,'rotate90' : right,'rotate180' : bottom }">
                  <img src="http://i.imgur.com/fVrS3hS.png">
                </div>
                <img class="dailKnob" src="http://i.imgur.com/VrnjQcT.png">
              </div>
            </div>
            <div class="col-xs-2 sides" >
              <div class="circle" style="float: left;" ng-class="{ 'active-circle' : right }" ng-click="rightRotate()"></div>
              <b class="p-2">No</b>
            </div>

          </div>
          <div class="col-xs-12 col-md-offset-3 col-md-6">
            <div class="col-xs-2 sides">
              &nbsp;
            </div>
            <div class="col-xs-8">
              <div class="image-container" style="width: 400px;">
                <div class="circle center-element" ng-class="{ 'active-circle' : bottom }" ng-click="bottomRotate()"></div>
                <div class="center-element" ><b>May be</b></div>
              </div>
            </div>
            <div class="col-xs-2">
              &nbsp;
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.min.js"></script>

http://plnkr.co/edit/Ou5bucYMDYdIOFUUAZeH?p=preview

我想创建它像时钟类型的动画.. 在此当用户单击否时 ->箭头将关闭动画 然后当用户点击 May Be... 时，它将从 No 开始到 May be .. 但是现在..它从第一帧开始..同样可能是..

最佳答案

只需使用 css-transition 而不是 css-animation

  1. 为 .dial 元素设置 transition:all 1s ease;(或根据需要自定义)。
  2. 对于 .rotate90、.rotate180 和 .rotate270 代替动画将其替换为 transform: rotateZ(your_deg);

像这样:

var app = angular.module('dialApp', ['ngAnimate']);

angular.module('dialApp').controller('MainController',['$scope', function ($scope) {
  $scope.test = 'Test';

  $scope.left = false;
  $scope.right = false;
  $scope.bottom = false;
  $scope.leftRotate = function () {
    $scope.left = true;
    $scope.right = false;
    $scope.bottom = false;
  }

  $scope.rightRotate = function () {
    $scope.left = false;
    $scope.right = true;
    $scope.bottom = false;
  }

  $scope.bottomRotate = function () {
    $scope.left = false;
    $scope.right = false;
    $scope.bottom = true;
  }

}]);
body {
  height: 100%;
}

.container {
  padding: 0px;
  margin: 0px;
  height: 100%;
}

.panel-default {
  border-color: #EFF7FA;
}

.panel-default > .panel-heading {
  text-align: justify;
  font-size: large;
  background-color: #EFF7FA;
}

.panel-body {
  background-color: #E7F0F4;
  height: 100%;
}

.circle {
  background-color: white;
  border: 3px solid #ffa003;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  -webkit-transition: background-color 1s ease-out, transform 1s ease-out;
  -moz-transition: background-color 1s ease-out, transform 1s ease-out;
  -o-transition: background-color 1s ease-out, transform 1s ease-out;
  transition: background-color 1s ease-out, transform 1s ease-out;
}

.circle:hover {
  background-color: #ffa003;
  cursor: pointer;
  -ms-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  /* IE 9 */
  -webkit-transform: scale(1.1, 1.1);
  /* Safari */
  transform: scale(1.1, 1.1);
  /* Standard syntax */
}

.active-circle {
  background-color: #ffa003;
  cursor: pointer;
  -ms-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  /* IE 9 */
  -webkit-transform: scale(1.1, 1.1);
  /* Safari */
  transform: scale(1.1, 1.1);
  /* Standard syntax */
}

.p-1 {
  float: left;
  line-height: 30px;
  vertical-align: middle;
  margin-right: 10px;
}

.p-2 {
  float: left;
  line-height: 30px;
  vertical-align: middle;
  margin-left: 10px;
}

.center-element {
  margin: auto;
  text-align: center;
}

.image-container {
  position: relative;
  /* margin-left: -120px; */
  width: 100%;
  text-align: center;
}

.dial {
  height: 120px;
  width: 120px;
  position: relative;
  z-index: 1;
  /* this element will animate because of this */
  transition:all 1s ease;
}


.dial:before {
  background-image: url('http://i.imgur.com/GmzAbGi.png');
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  height: 25px;
  width: 50px;
  top: -19%;
  right: 29%;
}

.dailKnob {
  position: absolute;
  z-index: 3;
  height: 60px;
  width: 60px;
  top: 25%;
  left: 170px;
}

.arrow {
  position: absolute;
  z-index: 1;
  left: 43%;
}

.rotate90 {
  /* use transform instead animation */
  transform: rotateZ(90deg);
}

.rotate180 {
  transform: rotateZ(180deg);
}

.rotate270 {
  transform: rotateZ(270deg);
}

.sides {
  margin-top: 7%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
<body ng-app="dialApp">
  <div class="container col-xs-12" ng-controller="MainController">
    <div class="panel panel-default" style="height: 100%">
      <div class="panel-heading">
        <p class="panel-heading">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor nunc, dapibus et est ut, maximus vehicula ipsum. Pellentesque orci purus, maximus eget eros eu, elementum mattis elit. Vivamus leo lacus, hendrerit id fringilla et, accumsan nec ligula.Ut pulvinar odio massa, vitae molestie eros consectetur non. Vivamus nunc lectus, consectetur id ullamcorper venenatis, rutrum in urna. Vestibulum at risus diam.
        </p>
      </div>
      <div class="panel-body">
        <div class="col-xs-12" style="margin-top: 10px;">
          <div class="col-xs-12 col-md-offset-3 col-md-6" style="height: 120px; margin-bottom: 60px;">
            <div class="col-xs-2 sides" >
              <b class="p-1">Yes </b>
              <div class="circle" style="float: left;" ng-class="{ 'active-circle' : left }" ng-click="leftRotate()"></div>
            </div>
            <div class="col-xs-8">
              <div class="image-container" style="width: 400px;">
                <!--  <img src="images/selectionArrow.png" class="arrow">-->
                <div class="dial center-element" ng-class="{'rotate270' : left ,'rotate90' : right,'rotate180' : bottom }">
                  <img src="http://i.imgur.com/fVrS3hS.png">
                </div>
                <img class="dailKnob" src="http://i.imgur.com/VrnjQcT.png">
              </div>
            </div>
            <div class="col-xs-2 sides" >
              <div class="circle" style="float: left;" ng-class="{ 'active-circle' : right }" ng-click="rightRotate()"></div>
              <b class="p-2">No</b>
            </div>

          </div>
          <div class="col-xs-12 col-md-offset-3 col-md-6">
            <div class="col-xs-2 sides">
              &nbsp;
            </div>
            <div class="col-xs-8">
              <div class="image-container" style="width: 400px;">
                <div class="circle center-element" ng-class="{ 'active-circle' : bottom }" ng-click="bottomRotate()"></div>
                <div class="center-element" ><b>May be</b></div>
              </div>
            </div>
            <div class="col-xs-2">
              &nbsp;
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.min.js"></script>

关于html - 从最后一个状态开始动画它结束 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34663847/

上一篇：javascript - 垂直居中网页元素

下一篇：html - 为字段的下拉列表选项自定义 html 输出

相关文章：

javascript - 无法使用 Javascript 或 Jquery 检查单选按钮

iphone - 使用 CSS 本地文件加载 UIWebView

javascript - 如何在wordpress小部件中将表格宽度设置为父div宽度

angularjs - Angular-Translate:指定每个翻译元素的语言

javascript - 带有angularjs的css中奇怪的渐变行为

php - 下拉值未循环插入数据库

html - 如何将一张图片重载到另一张图片上

html - 在 IE11 中 Bootstrap 导航栏搜索拆分

javascript - Angular ui-router 无法加载，更不用说解决工厂依赖关系了

javascript - 用js在android中打开 native 选择弹出窗口

©2024 IT工具网  联系我们