父div完成动画后动画子div

时间：2015-09-15 05:21:43

标签： css css3 css-animations

我有2个div（“a”和“b”）我正在尝试div“a”向上滑动并停止，div“b” 在div“a”中向上滑动。

<div id="a" class="animated slideInUp">
    <div id="b" class="animated slideInUp">&nbsp;</div>
</div>

这是我的JSFiddle 

#a {
  width: 100px;
  height: 50px;
  background-color: #000;
  border-radius: 10px;
  margin: 0 auto;
  position: relative;
}
#b {
  width: 100%;
  height: 10px;
  background-color: #860169;
  position: absolute;
  bottom: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
<div id="a" class="animated slideInUp">
  <div id="b" class="animated slideInUpChild">&nbsp;</div>
</div>

1 个答案:

答案 0 :(得分：2)

translate3d(0, y%, 0)只会将Y轴中的元素转换为元素高度的y％。这是100％将其翻译为10px（孩子的高度），10％将翻译为1px。此外，您将元素定位在父元素的底部，因此将其翻译为1px（结束状态）不会产生任何视觉效果。

您需要进行以下更改才能达到您想要的效果：

  • 为子元素使用不同的动画，这会将元素从bottom: 0px移动到bottom: calc(100% - 10px)（减去10px是元素的高度）。 bottom: 0px处的第一个关键帧将元素放在容器的底部，然后逐渐将其移动到父元素的顶部。
  • 将animation-delay添加到等于父元素animation-duration的子元素。这是确保子元素在父元素到达顶部之前不开始动画所必需的。

注意，因为您已将border-radius设置为左下角和右下角的子项，所以元素一旦达到顶部就不会很好看

＆＃13;
＆＃13; 
#a {
  width: 100px;
  height: 50px;
  background-color: #000;
  border-radius: 10px;
  margin: 0 auto;
  position: relative;
}
#b {
  width: 100%;
  height: 10px;
  background-color: #860169;
  position: absolute;
  bottom: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.slideInUpChild {
  -webkit-animation-name: slideInUpChild;
  animation-name: slideInUpChild;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
@-webkit-keyframes slideInUpChild {
  from {
    bottom: 0;
  }
  to {
    bottom: calc(100% - 10px);
  }
}
@keyframes slideInUpChild {
  from {
    bottom: 0;
  }
  to {
    bottom: calc(100% - 10px);
  }
}
＆＃13; 
<div id="a" class="animated slideInUp">
  <div id="b" class="animated slideInUpChild">&nbsp;</div>
</div>
＆＃13;
＆＃13;
＆＃13;

克服上面提到的border-radius问题的一种简单方法是取消border-radius并让父母的overflow: hidden设置处理它。< / p>

＆＃13;
＆＃13; 
#a {
  width: 100px;
  height: 50px;
  background-color: #000;
  border-radius: 10px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#b {
  width: 100%;
  height: 10px;
  background-color: #860169;
  position: absolute;
  bottom: 0;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.slideInUpChild {
  -webkit-animation-name: slideInUpChild;
  animation-name: slideInUpChild;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
@-webkit-keyframes slideInUpChild {
  from {
    bottom: 0;
  }
  to {
    bottom: calc(100% - 10px);
  }
}
@keyframes slideInUpChild {
  from {
    bottom: 0;
  }
  to {
    bottom: calc(100% - 10px);
  }
}
＆＃13; 
<div id="a" class="animated slideInUp">
  <div id="b" class="animated slideInUpChild">&nbsp;</div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题