1

Estou tentando adicionar um transition em uma div aonde adiciono uma class conforme o scroll, porém não está funcionando. Alguém poderia tentar me ajudar a entender o porque?

 window.addEventListener('scroll', function(){
  var pageScrollY = window.scrollY

  var msgChat = document.querySelector('.container-msg-chat');
                        
  if(pageScrollY >= 1000){
     msgChat.classList.add('msg-open');
  }else if(msgChat.classList.contains('msg-open')){
     msgChat.classList.remove('msg-open');
  }
});
a.container-icone--chat{
    position: fixed;
    bottom: 21px;
    right: 21px;
    background-color: #f96720;
    background-image: url('images/home/chat/icon-chat.png');
    background-position-x: 13px;
    background-position-y: center;
    background-repeat: no-repeat;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
    transition: background-color 1s ease;
}
a.container-icone--chat:hover{
    background-color: #fff;
    background-position-x: -49px;
}
a.container-msg-chat{
    position: fixed;
    bottom: 100px;
    background-color: #fff;
    right: 21px;
    width: 125px;    
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
    display: none;
    transition: all 5s ease;
}
a.container-msg-chat:before{
    content: '';
    display: inline-block;
    position: absolute;
    bottom: -9px;
    right: 27px;
    border-top: 5px solid #fff;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
}
.btn-chat{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-indent: -9999px;
}
a.container-msg-chat.msg-open{
    display: block!important;
}
.container{
     height: 5000px;
}
<div class="container"></div>

<a href="#" class="container-msg-chat">¿Necesita ayuda?</a>
<a href="#" class="container-icone--chat">
    <span class="btn-chat">Chat</span>
</a>

2
  • Sua pergunta não ficou muito clara Filype!
    – LeAndrade
    Commented 26/07/2018 às 23:13
  • Olá @LeAndrade, beleza? Estou tentando colocar um transition na container-msg-chat, porém ele não está acontencendo quando adiciono a class msg-open via js. Commented 26/07/2018 às 23:15

1 Resposta 1

0

O transition não funciona com a propriedade display. Neste caso você pode utilizar visibility e opacity para criar o efeito. Para isto, basta fazer as modificações abaixo:

a.container-msg-chat{
    position: fixed;
    bottom: 100px;
    background-color: #fff;
    right: 21px;
    width: 125px;    
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
    transition: opacity 5s ease;

    /* Modificado */
    display: block;

    /* Adicionado */
    opacity: 0;
    visibility: hidden;
}

a.container-msg-chat.msg-open{
    visibility: visible;
    opacity: 1
}

Exemplo:

window.addEventListener('scroll', function(){
  var pageScrollY = window.scrollY

  var msgChat = document.querySelector('.container-msg-chat');
                        
  if(pageScrollY >= 1000){
     msgChat.classList.add('msg-open');
  }else if(msgChat.classList.contains('msg-open')){
     msgChat.classList.remove('msg-open');
  }
});
a.container-icone--chat{
    position: fixed;
    bottom: 21px;
    right: 21px;
    background-color: #f96720;
    background-image: url('images/home/chat/icon-chat.png');
    background-position-x: 13px;
    background-position-y: center;
    background-repeat: no-repeat;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
    transition: background-color 1s ease;
}
a.container-icone--chat:hover{
    background-color: #fff;
    background-position-x: -49px;
}
a.container-msg-chat{
    position: fixed;
    bottom: 100px;
    background-color: #fff;
    right: 21px;
    width: 125px;    
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
    display: block;
    transition: opacity 5s ease;
    opacity: 0;
    visibility: hidden;
}
a.container-msg-chat:before{
    content: '';
    display: inline-block;
    position: absolute;
    bottom: -9px;
    right: 27px;
    border-top: 5px solid #fff;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
}
.btn-chat{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-indent: -9999px;
}
a.container-msg-chat.msg-open{
    visibility: visible;
    opacity: 1
}
.container{
     height: 5000px;
}
<div class="container"></div>

<a href="#" class="container-msg-chat">¿Necesita ayuda?</a>
<a href="#" class="container-icone--chat">
    <span class="btn-chat">Chat</span>
</a>

2
  • Muito obrigado. Funcionou. Commented 26/07/2018 às 23:22
  • @FilypeFerreira Que bom que deu certo. Se a resposta ajudou, não esqueça de marcar como resolvida, assim outros usuários poderão encontrá-la facilmente. Commented 26/07/2018 às 23:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .