我正在尝试从框.box-inner-1
的底部到顶部添加填充动画,但CSS旋转无法正常工作!
$('.box-inner-1').css({
top: '0'
}).animate({
"height": 260
}, 4000);

.wrapper {
position: relative;
height: 260px;
width: 260px;
padding: 0px !important;
background: #ddd;
}
.box-inner-1 {
position: absolute;
height: 0px;
left: 0;
right: 0;
background-color: greenyellow;
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box-inner-1"></div>
</div>
&#13;
答案 0 :(得分:2)
您可以通过将top: '0'
更改为bottom: '0'
,让框从下到上进行动画制作。
$('.box-inner-1').css({
bottom: '0'
}).animate({
"height": 260
}, 4000);
.wrapper {
position: relative;
height: 260px;
width: 260px;
padding: 0px !important;
background: #ddd;
}
.box-inner-1 {
position: absolute;
height: 0px;
left: 0;
right: 0;
background-color: greenyellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box-inner-1"></div>
</div>
答案 1 :(得分:0)
检查transform-origin:center
答案 2 :(得分:0)
实际上已经旋转了,但是从一开始就是这样 - 请参阅我的代码片段,在那里我向DIV添加了一些内容,这些内容是颠倒显示的。不确定你的内容是什么 - 旋转没有动画,如果你已经过了 - 你没有在任何地方设置(?)
$('.box-inner-1').css({
top: '0'
}).animate({
"height": 260
}, 4000);
.wrapper {
position: relative;
height: 260px;
width: 260px;
padding: 0px !important;
background: #ddd;
}
.box-inner-1 {
position: absolute;
height: 0px;
left: 0;
right: 0;
background-color: greenyellow;
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box-inner-1">look here</div>
</div>