IgorDePaula/transition.html

## transition.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #painel{
            display: block;
            background-color: #f00;
            width:200px;
            height:200px;
        }
        .maior{
            width:400px;
            -webkit-transition: width 1s ease-in-out;
            -moz-transition: width 1s ease-in-out;
            -o-transition: width 1s ease-in-out;
            transition: width 1s ease-in-out;
        }
    </style>
</head>
<body>
<div id="painel"></div>
<button id="clicar">clicar</button>
<script>
    let button = document.querySelector('#clicar')
    button.addEventListener('click',e =>{
        let div = document.querySelector('#painel')
       /* div.style.width = '400px';
        div.style.transition = ' width 1s ease-in-out'*/
        div.classList.add('maior')
    })
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	#painel{
	display: block;
	background-color: #f00;
	width:200px;
	height:200px;
	}
	.maior{
	width:400px;
	-webkit-transition: width 1s ease-in-out;
	-moz-transition: width 1s ease-in-out;
	-o-transition: width 1s ease-in-out;
	transition: width 1s ease-in-out;
	}
	</style>
	</head>
	<body>
	<div id="painel"></div>
	<button id="clicar">clicar</button>
	<script>
	let button = document.querySelector('#clicar')
	button.addEventListener('click',e =>{
	let div = document.querySelector('#painel')
	/* div.style.width = '400px';
	div.style.transition = ' width 1s ease-in-out'*/
	div.classList.add('maior')
	})
	</script>
	</body>
	</html>