1

tengo un problema con mi codigo. Html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Chat</title>
</head>
<body>
 <main>
   <div class="title">
     <h1>Chat</h1>
   </div>
   <div id="ventana-chat" class="ventana-chat">

   </div>
 </main>
 <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
   <script src="common.js"></script>
</body>
</html>

Css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    background: #e6e6e6;
}
*{
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
main{
    background-color: white;
    width:70%;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.title{
    padding: 20px;
    text-align: center;
    color: #535353;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.ventana-chat{
    height: 400px;
    padding: 20px;
    overflow-y: auto;
}
.container_quest_chat {
    background: #e6e6e6;
    border-radius: 10px;
    padding: 5px 10px;
    width: 0px;
    transition-property: width;
    transition-duration: 1s;
    transition-delay: 0s;
    animation: aparecer 0.2s ease 0s 2 normal
}

@keyframes aparecer {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

Js

function insertChat(data, img = false) {
    var dt = new Date();
    var hour = dt.getHours();
    var minute = dt.getMinutes();
    if (hour.toString().length == 1) { hour = `0${hour}`; }
    if (minute.toString().length == 1) { minute = `0${minute}`; }
    if (img) {
        dataImage = `<img src="` + data + `">`;
        data = dataImage;
    }
    $("#ventana-chat").append(`
        <div class="container_quest_chat">
            <div style="position: relative;width: fit-content;">
                <span class="time_bot_chat">${hour}:${minute}</span>
                <span class="q_chat">
                    <img src="assets/images/common/chatbot-icon.png" class="chatbot-icon" alt="chatbot-icon">
                    <span class="chat_t"></span>
                    <span class="chat_tx chat_tx_h loader_chat_tx">${data}</span>
                    <span class="loader-dots loader_chat">
                        <div class="jumping-dots-loader"> <span></span> <span></span> <span></span> </div>
                    </span>
                </span>
            </div>
        </div>
    `)
    $(".container_quest_chat").css({ "width": "80%" });
}

insertChat("Hola");
insertChat("Como estas?");

Cual es el problema? Que el primer mensaje se anima, pero el segundo mensaje no se anima. No se que esta pasando porque ambos tienen la misma clase.

Lo segundo es el transition de width solo hace efecto si lo paso de 0 a 80%, pero no me sirve que sea 80% o algun valor fijo, quisiera esa transition cogiendo el tamaño del mensaje de texto. Yo intente pasarle la propiedad width:fit-content pero transition no la soporta.

10/02/2022 Noche GTM-5

Ya resolvi el problema con el js, esto sucedia porque le estoy pasando el parametro de width a los dos elementos puesto que al crearse, ambos tienen la misma clase y por tanto la sentencia de jquery ataca a los dos div, mandando el ultimo texto a ambas cajas.

Ahora el problema real es como hago para llamar la funcion consecutivamente y que pueda ir saliendo una vez finalice la animacion de la anterior, la idea es que no salgan de golpe. Si de algo ayuda estoy intentando guiarme de esta web https://chats.landbot.io/

Actualizo

Muchas gracias

1
  • puedes hacer un await ejemplo: async function insertChat(data,img=... y en el metodo un await $("#ventana-chat").css(...
    – Bryro
    Commented el 10 feb. 2022 a las 19:49

1 respuesta 1

1

No entiendo muy bien porqué, he buscado referencias, pero no he encontrado nada, al parecer al ejecutar append + css el navegador lo toma como una sola operación entonces el segundo elemento es insertado con el width: 80% por lo que no dispara la animación.

Para solucionarlo le he agregado un setTimeout

function insertChat(data, img = false) {
    var dt = new Date();
    var hour = dt.getHours();
    var minute = dt.getMinutes();
    if (hour.toString().length == 1) { hour = `0${hour}`; }
    if (minute.toString().length == 1) { minute = `0${minute}`; }
    if (img) {
        dataImage = `<img src="` + data + `">`;
        data = dataImage;
    }
    $("#ventana-chat").append(`
        <div class="container_quest_chat">
            <div style="position: relative;width: fit-content;">
                <span class="time_bot_chat">${hour}:${minute}</span>
                <span class="q_chat">
                    <img src="assets/images/common/chatbot-icon.png" class="chatbot-icon" alt="chatbot-icon">
                    <span class="chat_t"></span>
                    <span class="chat_tx chat_tx_h loader_chat_tx">${data}</span>
                    <span class="loader-dots loader_chat">
                        <div class="jumping-dots-loader"> <span></span> <span></span> <span></span> </div>
                    </span>
                </span>
            </div>
        </div>
    `)
   setTimeout(() => {
      $(".container_quest_chat").css({ "width": "80%" });
    }, 0)
}

insertChat("Hola");
insertChat("Como estas?");
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    background: #e6e6e6;
}
*{
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
main{
    background-color: white;
    width:70%;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.title{
    padding: 20px;
    text-align: center;
    color: #535353;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.ventana-chat{
    height: 400px;
    padding: 20px;
    overflow-y: auto;
}
.container_quest_chat {
    background: #e6e6e6;
    border-radius: 10px;
    padding: 5px 10px;
    width: 0px;
    transition-property: width;
    transition-duration: 1s;
    transition-delay: 0s;
    animation: aparecer 0.2s ease 0s 2 normal
}

@keyframes aparecer {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Chat</title>
</head>
<body>
 <main>
   <div class="title">
     <h1>Chat</h1>
   </div>
   <div id="ventana-chat" class="ventana-chat">

   </div>
 </main>
 <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
   <script src="common.js"></script>
</body>
</html>

1
  • 1
    El navegador necesita un tiempo para interpretar el nuevo contenido y, sin el setTimeout, aplica el estilo directamente, durante la interpretación. Con el setTimeout, le dices al navegador que ponga esa instrucción al final de la cola de ejecución y la aplica después de haber interpretado y mostrado el nuevo contenido, que es donde sí se aplica la animación.
    – Triby
    Commented el 10 feb. 2022 a las 22:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.