使用居中的元素保持相同的动画

Question

我自定义了以下加/减切换：https://codepen.io/Inlesco/pen/XXRRmY

它由2个元素vertical和horizontal组成，当两个元素可见时，它们代表+，单击vertical消失，它们代表{{1 }}。

我希望它更小，所以我将宽度和高度更改为大约一半，然后使用-将垂直和水平元素居中。

这是现场的小提琴：http://jsfiddle.net/kLc728ad/2/

transform: translate(-50%)

$('.plusminussign').on('click', function(){
    $(this).toggleClass('opened');
});

.plusminussign{
    position: relative;
    display:inline-block;
    height: 24px;
    width: 24px;
    opacity: .7;
    background: green;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}

.circle .horizontal {
  position: absolute;
    background-color: #fff;
    width: 15px;
    height: 2.5px;
    left: 50%;
    top: 50%;
}

.circle .vertical {
  position: absolute;
    background-color: #fff;
    width: 2.5px;
    height: 15px;
    left: 50%;
    top: 50%;
}

.closed .horizontal {
  transition: all 0.5s ease-in-out;
  transform: translate(-50%,-50%) rotate(-90deg);
  opacity: 1;
}

.closed .vertical {
  transition: all 0.5s ease-in-out;
  transform: translate(-50%,-50%) rotate(-90deg);
}

.opened {
  opacity: 1;
}

.opened .horizontal {
  transition: all 0.5s ease-in-out;
  transform: translate(-50%,-50%) rotate(-90deg);
  opacity: 0;
}

.opened .vertical {
  transition: all 0.5s ease-in-out;
  transform: translate(-50%,-50%) rotate(-90deg);
}

我认为这是因为<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="plusminussign closed"> <div class="circle"> <div class="horizontal"></div> <div class="vertical"></div> </div> <!-- .circle --> </span> <!-- .plusminussign -->中的translate()部分。

如何使它工作？

Answer 1

您的转换正在碰撞。使用百分比时，您将获得完全可缩放且有效的动画，该动画仅依赖于外圆的像素大小。

MODULE statistics

PUBLIC :: TimeMarker , start , finish , avgTime , begin , end_ , tsum ,  counts 

TYPE TimeMarker
  REAL*8 :: begin , end_ , tsum 
  INTEGER :: counts = 0
    CONTAINS
            PROCEDURE :: start => start_time
            PROCEDURE :: finish => finish_time
            PROCEDURE :: avgTime => averageTime
END TYPE TimeMarker


CONTAINS


        SUBROUTINE start_time(this)
        CLASS(timeMarker) , INTENT(INOUT) :: this
        CALL CPU_TIME(begin)
            END SUBROUTINE start_time      

            SUBROUTINE finish_time(this)
        CLASS(timeMarker) , INTENT(INOUT) :: this
        CALL CPU_TIME(end_)
        tsum = tsum + end_ - begin
        counts = counts + 1
            END SUBROUTINE finish_time          

            SUBROUTINE averageTime(this)
        CLASS(timeMarker) , INTENT(INOUT) :: this
        WRITE(*,*) "Average time : " , tsum/counts
            END SUBROUTINE averageTime   


END MODULE statistics



program test
  use statistics
  implicit none
  type(TimeMarker) :: t
  integer :: n , m
  real*8 :: a

  do m=1,50    
    call t%start
    do n=1,20000000
      a = sqrt(a)
    end do  

    print*, t%tsum

  end do
  call t%avgTime


end program test

$('.circle-plus').on('click', function(){
   $(this).toggleClass('opened');
  });

.closed .vertical {
    transition: all 0.5s ease-in-out;
    transform: rotate(-90deg);
  }
.closed .horizontal {
    transition: all 0.5s ease-in-out;
    transform: rotate(-90deg);
    opacity: 1;
}
.closed > div {background: green;}
.opened > div {background: red;}
.opened {opacity: 1;}
.opened .vertical {
    transition: all 0.5s ease-in-out;
    transform: rotate(90deg);
}
.opened .horizontal {
    transition: all 0.5s ease-in-out;
    transform: rotate(90deg);
    opacity: 0;
}
.circle-plus {
    opacity: 1;
}
.circle-plus .circle {
    position: relative;
    width: 20px; /* only value you have to change to scale */
    height: 20px; /* only value you have to change to scale */
    border-radius: 100%;
}
.circle-plus .circle .horizontal {
    position: absolute;
    background-color: white;
    width: 60%;
    height: 10%;
    left: 50%;
    margin-left: -30%;
    top: 50%;
    margin-top: -5%;
}
.circle-plus .circle .vertical {
    position: absolute;
    background-color: white;
    width: 10%;
    height: 60%;
    left: 50%;
    margin-left: -5%;
    top: 50%;
    margin-top: -30%;
}