0
다음을 보시오 JSFiddle
내가 겪고있는 문제는 NotificationText의 최상위 전환은 항상 발생하지만 알림의 높이 전환은 발생하지 않는다는 것입니다.
알림 전환이 임의로 시작되는 것 같습니다.
JSFiddle의 버튼을 여러 번 누르면 방금 무슨 뜻인지 알 수 있습니다.CSS3 전환 실패 FireFox에서
편집 : 시간 제한을 1에서 100ms로 설정하면 효과가있는 것처럼 보입니다. 그 이유는 모르겠습니다. 아무도 설명해 주시겠습니까? 나는 그것을
을 어떻게했는지 대답은 :-) 당신이 원하는 경우 아래의 답변을 봐 찾을 내가 가진 알림 표시 줄을 알고 : 텍스트에서 상위 전환은 항상
EDIT2가 작동하는 것 같다 다음 HTML 구조 :
<div class="WebApp_NotificationContainer">
<div class="WebApp_Notification" style="height: 30px;">
<div class="WebApp_NotificationText " style="top: 0px;">TESTING</div>
</div>
</div>
이 자바 스크립트에 의해 생성 된 모든 (새로운 알림 컨테이너에 추가)된다.
function addNotification(){
var eViewPort = document.body;
var eNotificationContainer = $(".WebApp_NotificationContainer");
var eNotification, eNotificationText, eNotificationDiv, eAllNotifications;
var sNotification = "TEST";
//Create the container if it doesn't already exist
if(eNotificationContainer.length ==0){
eNotificationContainer = document.createElement('div');
eNotificationContainer.className = "WebApp_NotificationContainer";
eViewPort.appendChild(eNotificationContainer);
eNotificationContainer = $(eNotificationContainer);
}
//Get a reference to the notifications
eAllNotifications = $(".WebApp_Notification");
//Create the new notification div
eNotification = document.createElement('div');
eNotification.className = "WebApp_Notification";
//Create the textnode to be shown in the notification
eNotificationText = document.createTextNode(sNotification);
//Create the div to contain the text
eNotificationDiv = document.createElement('div');
eNotificationDiv.className = "WebApp_NotificationText";
eNotificationDiv.appendChild(eNotificationText);
eNotification.appendChild(eNotificationDiv);
//Add the notification at the top of the list
if(eAllNotifications.length > 0){
$(eNotification).insertBefore(eAllNotifications[0]);
}else{
eNotificationContainer.append(eNotification);
}
var y = eNotification.offsetHeight;
eNotification.style.height = "0px";
//For some reason we want to wait a little bit after the notification is appended for the animation to work
setTimeout(function(){
eNotification.style.height = "30px";
eNotificationDiv.style.top = "0px";
},1);
}
CSS 화면 맨 위의 팝업 알림과 드롭 다운 표시 전환을 관리해야합니다.
.WebApp_NotificationContainer{
position: fixed;
top: 0px;
width: 500px;
margin-left: -250px;
left: 50%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #9EA85E;
}
.WebApp_Notification{
position: relative;
border-top: 1px solid #BEBEBE;
overflow: hidden;
top: 0px;
transition: height, top;
-moz-transition: height, top;
-webkit-transition: height, top;
transition-duration: 1s;
transition-timing-function: linear;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function:linear;
color: #FFF;
background: #9EA85E;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
z-index: 1;
}
.WebApp_NotificationText{
transition: top linear 1s ;
-moz-transition: top linear 1s ;
-webkit-transition: top linear 1s ;
top:-30px;
float: left;
width: 450px;
margin: 10px 0px 10px 20px;
position: relative;
}