我有2个div(“a”和“b”)我正在尝试div“a”向上滑动并停止,div“b” 在div“a”中向上滑动。
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUp"> </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"> </div>
</div>
答案 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
设置为左下角和右下角的子项,所以元素一旦达到顶部就不会很好看
#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"> </div>
</div>
&#13;
克服上面提到的border-radius
问题的一种简单方法是取消border-radius
并让父母的overflow: hidden
设置处理它。< / p>
#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"> </div>
</div>
&#13;