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

Posted 2023-03-06

技术标签:

【中文标题】从最后一个状态开始动画它结束 CSS【英文标题】：Start Animation from last state it ends CSS 【发布时间】：2016-04-12 08:33:48 【问题描述】：

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

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

【问题讨论】：

【参考方案1】：

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

.dial

transition:all 1s ease;

.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>

【讨论】：

我的荣幸.. 祝你好运！

以上是关于从最后一个状态开始动画它结束 CSS的主要内容，如果未能解决你的问题，请参考以下文章

在 CSS3 动画结束时保持最终状态

css3的-webkit-animation动画执行后会变回原来的样子，怎么保留住动画最后的状态呢？

CSS过渡动画

使用jQuery检测animate.css的动画状态和动画状态结束[重复]

你如何检测 CSS 动画何时以 JavaScript 开始和结束？

CSS3 关键帧动画：结束并停留在最后一帧