I would like to show and slide an element from the left to the right of the page. To do so, I hide it by default. When a button is clicked, the ul element is displayed and its width goes from 0px to 100vw. I also added a transition on the width property of the ul element.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<button id="click_me" class="inline-block border-2 p-6"> Click Me! </button>
<ul id="hidden_nav" class="hidden w-0 h-screen bg-red-50 mt-10 transition-[width] duration-1000">
<li> Item </li>
<li> Item </li>
</ul>
</body>
</html>
JS:
const btn = document.getElementById('click_me');
const navul = document.getElementById('hidden_nav');
btn.addEventListener('click', function(){
navul.classList.toggle('hidden');
navul.classList.toggle('w-0');
navul.classList.toggle('w-screen');
});
Codepen link:
https://codepen.io/Okumak/pen/qBVjwdY
Yet, I cannot see any transition going on and I don't get why.
It will never work with a hidden class. An alternative solution would be opacity.
const btn = document.getElementById('click_me');
const navul = document.getElementById('hidden_nav');
btn.addEventListener('click', function(){
navul.classList.toggle('opacity-0');
navul.classList.toggle('w-0');
navul.classList.toggle('w-screen');
});<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<button id="click_me" class="inline-block border-2 p-6"> Click Me! </button>
<ul id="hidden_nav" class="opacity-0 w-0 h-screen bg-red-50 mt-10 transition-[width] duration-1000">
<li> Item </li>
<li> Item </li>
</ul>
</body>
</html>Just look after the height. It still takes up space when hidden, just in case you want to toggle it as well then you can do so.