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

我自定义了以下加/减切换：

它由两个元素组成

垂直

和

水平

，当这两个元素可见时，它们表示

+

，单击

垂直

时，它们消失，表示

-

我希望它更小，所以我将宽度和高度更改为大约一半，并使用

transform:translate（-50%）

将垂直和水平元素居中

这是一把活小提琴：

$（'.plusminussign'）。在（'click'，function（）上{
$（this.toggleClass（'opened'）；
});
.plusminussign{
位置：相对位置；
显示：内联块；
高度：24px；
宽度：24px；
不透明度：.7；
背景：绿色；
边界半径：50%；
颜色：#fff；
光标：指针；
}
.圆圈.水平{
位置：绝对位置；
背景色：#fff；
宽度：15px；
高度：2.5px；
左：50%；
最高：50%；
}
.圆圈.垂直{
位置：绝对位置；
背景色：#fff；
宽度：2.5px；
高度：15px；
左：50%；
最高：50%；
}
.关闭。水平{
过渡：所有0.5s缓进缓出；
变换：平移（-50%，-50%）旋转（-90度）；
不透明度：1；
}
.关闭。垂直{
过渡：所有0.5s缓进缓出；
变换：平移（-50%，-50%）旋转（-90度）；
}
.打开{
不透明度：1；
}
.打开.水平{
过渡：所有0.5s缓进缓出；
变换：平移（-50%，-50%）旋转（-90度）；
不透明度：0；
}
.打开.垂直{
过渡：所有0.5s缓进缓出；
变换：平移（-50%，-50%）旋转（-90度）；
}
您的变换发生冲突。当您使用百分比时，您将拥有一个完全可伸缩且工作正常的动画，该动画仅依赖于外圈的像素大小


$（'.circle plus'）。在（'click'，function（）上{
$（this.toggleClass（'opened'）；
});
。关闭。垂直{
过渡：所有0.5s缓进缓出；
变换：旋转（-90度）；
}
.关闭。水平{
过渡：所有0.5s缓进缓出；
变换：旋转（-90度）；
不透明度：1；
}
.closed>div{背景：绿色；}
.opened>div{背景：红色；}
.opened{opacity:1；}
.打开.垂直{
过渡：所有0.5s缓进缓出；
变换：旋转（90度）；
}
.打开.水平{
过渡：所有0.5s缓进缓出；
变换：旋转（90度）；
不透明度：0；
}
.circle plus{
不透明度：1；
}
.圆圈+圆圈{
位置：相对位置；
宽度：20px；/*您必须更改为比例的唯一值*/
高度：20px；/*您必须更改为刻度的唯一值*/
边界半径：100%；
}
.圆加上.圆.水平{
位置：绝对位置；
背景色：白色；
宽度：60%；
身高：10%；
左：50%；
左边缘：-30%；
最高：50%；
利润率最高：-5%；
}
.圆加上.圆.垂直{
位置：绝对位置；
背景色：白色；
宽度：10%；
身高：60%；
左：50%；
左边缘：-5%；
最高：50%；
利润率最高：-30%；
}