Сохраняйте ту же анимацию с центрированными элементами

Question

Я настроил следующий тумблер плюс / минус: https://codepen.io/Inlesco/pen/XXRRmY

Он состоит из 2 элементов vertical и horizontal. Когда два элемента видны, они представляют +, а при нажатии vertical исчезает и они представляют -.

Я хотел, чтобы он был меньше, поэтому я изменил ширину и высоту примерно на половину, и я использовал transform: translate(-50%), чтобы центрировать вертикальные и горизонтальные элементы.

Вот живая скрипка: http://jsfiddle.net/kLc728ad/2/

$('.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() части в transform: translate(-50%,-50%) rotate(-90deg);.

Как заставить это работать?

Answer 1

Ваши трансформации сталкиваются. Когда вы используете проценты, у вас будет отлично масштабируемая и работающая анимация, которая зависит только от размера пикселя внешнего круга.

$('.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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle-plus closed">
  <div class="circle">
    <div class="horizontal"></div>
    <div class="vertical"></div>
  </div>
</div>