Мне нужно добавить эффект fade на мою функцию javascript
Javascript
<script type="text/javascript">
window.onload=function() {
loginBtn = document.getElementById('loginBtn');
fader = document.getElementById('login_fader');
login_box = document.getElementById('login_box');
closebtn = document.getElementById('closelogin');
loginBtn.onclick=function(){
fader.style.display = "block";
login_box.style.display = "block";
}
closebtn.onclick=function() {
fader.style.display = "none";
login_box.style.display = "none";
}
}
</script>
HTML
<div id="login_fader"> </div>
<div id="login_box">
<table class="table-login">
<th>Login or Register</th>
<th><a id="closelogin">X</a></th>
<tr>
<td>Login</td>
<td>Register</td>
</tr>
</table>
</div>
CSS
<style type="text/css">
#loginBtn {
float: right;
margin-top: -6%;
cursor:pointer;
}
#login_fader {
background: black;
opacity: .5;
-moz-opacity: .5;
-filter: alpha(opacity=50);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 5;
display: none;
}
#login_box {
width: 320px;
height: 200px;
border: 1px white solid:
background: #5a5a5a;
position: fixed;
top: 25%;
left: 35%;
z-index: 10;
display: none;
}
.table-login {
background: #FFF;
border-radius: 8px;
box-shadow: 0 0 5px 2px;
opacity: 0.95;
}
#closelogin {
float:right;
cursor:pointer;
}
</style>
Js скрипка
Я попытался использовать свойства transition
из css3 и попытался применить оба login_box
и login_fader
. Я нашел некоторые функции в сети, но не знаю, как связать их с моей уже созданной функцией, и я думал, есть ли какие-либо свойства, которые я могу связать с моей функцией.
Правильный способ исчезнуть в статическом поле в css3 и js 1.7 ++
Это пример использования только webkit и современных javascripts classList.add
но вы можете добавить другие префиксы. -moz,-ms,-o
в этом примере я показываю только анимацию.
CSS
.box{
width:100%;
height:100%;
position:fixed;
left:0;top:-100%;/*notice TOP -100%*/
opacity:0;
-webkit-transition:opacity 700ms ease,top 0 linear 700ms;/*notice TOP delay*/
background-color:rgba(0,0,0,0.7);
}
.box.active{
-webkit-transition:opacity 700ms ease,top 0 linear 0;
/*top transition not needed but could help to understand*/
top:0;
opacity:1;
}
JS
function show(){
box.classList.add('active');
}
function hide(){
box.classList.remove('active');
}
var box=document.getElementsByClassName('box')[0],
button=document.getElementsByTagName('button')[0];
button.addEventListener('click',show,false);
box.addEventListener('click',hide,false);
DEMO
http://jsfiddle.net/RAu8Q/ больше не работает
http://jsfiddle.net/RAu8Q/17/ новый синтаксис 10-2015
Если у вас есть какие-либо вопросы просто спросить.
Прежде всего, не пытайтесь использовать css
переходы в сочетании с свойством display, это не сработает ! Вместо этого попробуйте перейти к другим свойствам. Например, возьмем opacity
(мы будем моделировать display
: none
/block
, установив opacity
0/1)
Во-вторых, установите начальное значение для непрозрачности 0
на желаемый элемент HTML
(тот, который вы хотите оживить). Укажите, какое свойство для анимации (opacity
в нашем случае):
transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transtion: opacity 1s;
Когда нажата кнопка входа в систему, установите непрозрачность в 1:
loginBtn.onclick=function() {
fader.style.opacity = 1;
login_box.style.opacity = 1;
}
Когда нажата кнопка закрытия, установите opacity в 0:
closebtn.onclick=function() {
fader.style.opacity = 0;
login_box.style.opacity = 0;
}
Ссылка на скрипку.
Я не могу точно сказать, какого эффекта вы пытаетесь достичь, но если вы собираетесь использовать переходы CSS, вам нужно перейти между численными свойствами. То есть вы не можете ожидать, что исчезновение произойдет просто путем перехода с display:block
to display:none
. Вместо этого вы хотите использовать непрозрачность.
Я считаю, что то, что вы хотите сделать, требует анимации css. Поэтому просто создайте класс анимации, который исчезает из целевого элемента и применяет его после входа пользователя в систему.
@keyframes fadeOut {
from: {
opacity:1;
},
to: {
opacity:0;
}
}
затем используйте его применительно к классу
.fadeOut {
animation:fadeOut 0.25s forwards;
}
ПРИМЕР