'CSS's native transition doesn't work once I add Bootstrap 3's stylesheet

This works, but the moment I add Bootstrap 3, (which I need to as it's required in an existing project) it no longer fades in and out.

<!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" />

    <style type="text/css">
    .flashcard
    {
        opacity: 1;
        transition: opacity 2s;
    }

    .flashcard.hidden
    {
        opacity: 0;
    }    
    </style>
    
    <script>
    document.addEventListener('DOMContentLoaded', (event) =>
    {
        var d = document.getElementById('code-yes-text');
        d.classList.add("hidden");

        document.getElementById('code-yes').addEventListener("change", function()
        {
            if (this.checked && d.classList.contains("hidden"))
            {
                document.getElementById('code-yes-text').classList.toggle('hidden');                
            }
        });
        document.getElementById('code-no').addEventListener("change", function()
        {
            if (this.checked && !d.classList.contains("hidden"))
            {
                document.getElementById('code-yes-text').classList.toggle('hidden');                
            }
        });
    });        
    </script>
</head>
<body>    

<div class="radio">
    <label>
        <input type="radio" name="code" id="code-yes" />
        <span>Yes</span>
    </label>
</div>

<div id="code-yes-text" class="flashcard hidden">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam quibusdam suscipit culpa voluptatem nulla. Rerum explicabo in quo commodi ad laudantium nam ratione consectetur beatae, sint dolore molestias assumenda soluta.
</div>            

<div class="radio">
    <label>
        <input type="radio" name="code" id="code-no" />
        <span>No</span>
    </label>
</div>            
    
</body>
</html>
twitter-bootstrap-3transition


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions