Исчезать атрибут / функция эффекта в пользовательском скрипте javascript?

Question

Исчезать атрибут / функция эффекта в пользовательском скрипте javascript?

0

Мне нужно добавить эффект 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">&nbsp;</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 скрипка

http://jsfiddle.net/U3n4j/

Я попытался использовать свойства transition из css3 и попытался применить оба login_box и login_fader. Я нашел некоторые функции в сети, но не знаю, как связать их с моей уже созданной функцией, и я думал, есть ли какие-либо свойства, которые я могу связать с моей функцией.

user3140607 21 фев. 2014, в 17:06

Источник

Теги:

javascript

html

css

html5

css3

4 ответа

1

Прежде всего, не пытайтесь использовать 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;
  }

Ссылка на скрипку.

Nicolae Olariu 21 фев. 2014, в 15:12

1

Я не могу точно сказать, какого эффекта вы пытаетесь достичь, но если вы собираетесь использовать переходы CSS, вам нужно перейти между численными свойствами. То есть вы не можете ожидать, что исчезновение произойдет просто путем перехода с display:block to display:none. Вместо этого вы хотите использовать непрозрачность.

Bill F. 21 фев. 2014, в 14:14

0

Я считаю, что то, что вы хотите сделать, требует анимации css. Поэтому просто создайте класс анимации, который исчезает из целевого элемента и применяет его после входа пользователя в систему.

@keyframes fadeOut {
    from: {
        opacity:1;
    },
    to: {
        opacity:0;
    }
}

затем используйте его применительно к классу

.fadeOut {
     animation:fadeOut 0.25s forwards;
}

ПРИМЕР

http://jsfiddle.net/zgPrc/

Shalom Aptekar 21 фев. 2014, в 15:36

Ещё вопросы

cocco · Accepted Answer · 2014-02-21T13-35-00.000Z

Правильный способ исчезнуть в статическом поле в 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

Если у вас есть какие-либо вопросы просто спросить.