我很想在div元素上实现可接受的转换,div元素包含垂直和水平居中的文本。
带有文本的span元素随着过渡到顶部而移动并创建这种丑陋的淡出效果。我偶然发现了the following question,但不幸的是,对于跨度包装元素的绝对位置,它没有多大帮助。
<!-- Success -->
<div class="panel panel-default action-message-div message-panel-success" ng-hide="lobby.actionMessage.isError === null || lobby.actionMessage.isError === true">
<span class="action-message-span">{{lobby.actionMessage.data}}</span>
</div>
.action-message-div {
height: 75px;
line-height: 75px;
text-align: center;
}
.action-message-span{
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.message-panel-success {
border: 2px solid #008000;
background-color: #90EE90;
}
.message-panel-success.ng-hide-add, .message-panel-success.ng-hide-remove {
transition: all ease-out 1s;
-webkit-transition: all ease-out 1s;
-moz-transition: all ease-out 1s;
-o-transition: all ease-out 1s;
-ms-transition: all ease-out 1s;
}
.message-panel-success.ng-hide {
line-height: 0;
opacity: 0;
padding: 0 10px;
}
line-height: 0;
中的message-panel-success.ng-hide
搞砸了我的CSS - 当然,你无法将其从75px更改为0。