为什么我的 css 转换初始化时我的一些元素会跳跃？

Question

我正在创建一个带有动画过渡的小部件。单击时，隐藏在主圆形元素后面的圆形元素应从中心向外扩展。

我的初始样式正确定位了这些动画元素，我的活动样式正确定位了这些元素，但是当活动类被切换时，有些东西使它们中的一半从一个奇怪的位置开始。

为什么会这样？

这里是fiddle。

CSS 代码：

#al_stage {
    border:1px solid #000;
    width:650px;
    height:650px;
    position:relative;
    margin:20px auto;
}
.al_container {
    position:relative;
    padding:70px;
    box-sizing:border-box;
    width:255px;
    display:block;
    background:#5c76a3;
    border-radius:10px;
}
.al_scale {
    width:100%;
    padding-bottom:100%;
    position:relative;
    display:block;
}
.al_circle {
    z-index:2;
    border-radius:50%;
    background:gray;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.al_wrapper {
    display:table;
    width:100%;
    height:100%;
}
.al_center {
    height:100%;
    width:100%;
    vertical-align:middle;
    text-align:center;
    display:table-cell;
    position:relative;
}
.al_bubble {
    position:absolute;
    z-index:3;
    display:block;
    left:50%;
    right:50%;
    bottom:50%;
    top:50%;
    margin-right:0;
    margin-bottom:0;
    margin-top:0;
    margin-left:0;
}
.al_md {
    width:76%;
    height:76%;
    margin-left:-38%;
    margin-top:-38%;
    margin-right:initial;
    margin-bottom:initial;
}
.al_sm {
    width:60%;
    height:60%;
    margin-left:-30%;
    margin-top:-30%;
    margin-right:initial;
    margin-bottom:initial;
}
.active {
    -webkit-transition:left 1.0s, right 1.0s, top 1.0s, bottom 1.0s, margin-left 1.0s, margin-top 1.0s, margin-bottom 1.0s, margin-right 1.0s;
    transition:left 1.0s, right 1.0s, top 1.0s, bottom 1.0s, margin-left 1.0s, margin-top 1.0s, margin-bottom 1.0s, margin-right 1.0s;
}
.al_twelve.active {
    top:initial;
    bottom:100%;
    margin-top:0;
    margin-bottom:1%;
}
.al_six.active {
    top:100%;
    bottom:initial;
    margin-bottom:0;
    margin-top:1%;
}
.al_three.active {
    left:100%;
    right:initial;
    margin-left:1%;
    margin-right:0;
}
.al_nine.active {
    right:100%;
    left:initial;
    margin-right:1%;
    margin-left:0;
}
.bubble_container {
    width:100%;
    height:100%;
    position:absolute;
}
.deg30 {
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
.deg30 .al_scale {
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
.deg60 {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
.deg60 .al_scale {
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.hide {
    display: none;
}

Answer 1

好的，经过又一轮的摆弄，我已经解决了这个问题，方法是在定位上稍微详细一点。以下是主要变化：

.al_bubble {
  position: absolute;
  z-index: 3;
}
.al_md {
  width: 76%;
  height: 76%;
}
.al_sm {
  width: 60%;
  height: 60%;
}
.al_three.al_md,
.al_six.al_md {
  top: 50%;
  left: 50%;
  margin-top: -38%;
  margin-left: -38%;
}
.al_three.al_sm,
.al_six.al_sm {
  top: 50%;
  left: 50%;
  margin-top: -30%;
  margin-left: -30%;
}
.al_twelve.al_md,
.al_nine.al_md {
  bottom: 50%;
  right: 50%;
  margin-bottom: -38%;
  margin-right: -38%;
}
.al_twelve.al_sm,
.al_nine.al_sm {
  bottom: 50%;
  right: 50%;
  margin-bottom: -30%;
  margin-right: -30%;
}
.active {
  -webkit-transition: left 1.0s, right 1.0s, top 1.0s, bottom 1.0s, margin-left 1.0s, margin-top 1.0s, margin-bottom 1.0s, margin-right 1.0s;
  transition: left 1.0s, right 1.0s, top 1.0s, bottom 1.0s, margin-left 1.0s, margin-top 1.0s, margin-bottom 1.0s, margin-right 1.0s;
}
.al_twelve.active {
  bottom: 100%;
  margin-bottom: 5px;
}
.al_six.active {
  top: 100%;
  margin-top: 5px;
}
.al_three.active {
  left: 100%;
  margin-left: 5px;
}
.al_nine.active {
  right: 100%;
  margin-right: 5px;
}

这里是fiddle