Put transition effect on div that is added class according to scroll

Question

Put transition effect on div that is added class according to scroll

Navigation

#1 by (0 votes)

1

I am trying to add a transition in a div where I add a class according to the scroll, but it is not working. Could anyone try to help me understand why?

 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>

javascript css

asked by anonymous 27.07.2018 / 00:02

1 answer

How to change a meta tag in a SPA? C # HttpWebRequest send multipart / form-data to POST

score 0 · Answer 1

The transition does not work with the display property. In this case you can use visibility and opacity to create the effect. To do this, just make the modifications below:

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
}

Example:

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>