JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<button class="btn btn-primary" id="btn_toggle">Toggle</button><button class="btn btn-primary" id="btn_toggle2">Toggle 2</button>
<div id="outer" class="container bg-primary"><div class="card bg-success">
<div id="optChatTitle"><input type="text" class="" value="Das ist ein Test"</div>
</div></div>

CSS

div.container {
	transition: opacity 2s ease-in-out;
	height: 90vh;
	opacity: 1;
}

div.container.hide {
	transition: opacity 2s ease-in-out, height 0s ease-in-out 2s;
	opacity: 0;
	height: 0;
    overflow: hidden;
}

div.container div.card {
	height: 90%;
	
}

JavaScript

const btnToggle = document.querySelector("#btn_toggle")
const btnToggle2 = document.querySelector("#btn_toggle2")
const outer = document.querySelector("#outer")
const optChatTitle = document.querySelector("#optChatTitle")
const optChatTitleTextarea = optChatTitle.getElementsByTagName("input")[0]

let hide = 0;
btnToggle.onclick = () => {
	hide=!hide
	if (hide) outer.classList.add("hide")
	else outer.classList.remove("hide")
	console.log(hide)
}

let toggleClass = 0;
btnToggle2.onclick = () => {
	toggleClass=!toggleClass
	if (toggleClass) optChatTitle.classList.add("typer")
	console.log(toggleClass)
}


	// Funktion zum Erstellen eines Tipp-Effekts
	function typewriterEffect(element, text, speed) {
		let i = 0
		let intervalId

		function type() {
			if (i < text.length) {
				element.value += text[i]
				i++
				intervalId = setTimeout(type, speed)
			} else {
				optChatTitle.classList.remove("typer")
				clearInterval(intervalId)
			}
		}
		// Starte den Tipp-Effekt
		type()
	}

	const observer = new MutationObserver(function (mutations) {
		mutations.forEach(function (mutation) {
		console.log("mutation.type: " + mutation.type)
			if (mutation.type === "attributes" && mutation.target === optChatTitle) {
			console.log("Attributes change!")
				if (mutation.attributeName === "class") {
					if (mutation.target.className.includes("typer")) {
						const text = optChatTitleTextarea.value
						optChatTitleTextarea.value = ""
						typewriterEffect(optChatTitleTextarea, text, 30)
					}
				}
			}
		})
	})

	observer.observe(optChatTitleTextarea, {
		childList: true,
		attributes: true,
		subtree: true,
		//attributeFilter: ["class"],
	})