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
async function insertChat(data,img=...
y en el metodo unawait $("#ventana-chat").css(...