transition doesn't work with css - no fade in animation

Question

I have this code part, which shows me a button "Click me". On click it should present a window (with iframe content)

I deeper look with the browser developer tools shows this css part:

.etwidget {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 0;
    width: 100%;
    max-width: 500px;
    overflow: auto;
    position: absolute;
    top: 0;
    transition: opacity .5s ease-out,transform .5s ease-out,-webkit-transform .5s ease-out;
    background: #fff;
    border-left: 1px solid rgba(0,0,0,.1);
    border-right: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 .0625em .25em rgba(0,0,0,.2);
    right: 0;
    opacity: 0;
    z-index: 100000;
}

But the transition part doesn't work. I see no "smooth fade in animation" Is the css part wrong? And yes, how I have to modify the css part, that the animation will work? Thanks !!

#etwidgetModal {
  height: 88% !important;
  position: fixed !important;
  top: 20px !important;
  right: 25px;
}

<html>

<body style="height: 5000px;">


  <button id="etwidgetBtn" class="etwidgetBtn rightPosBtn" type="button"></button>
  <div id="etwidgetModal" class="etwidget">
    <div class="etcontent"><span id="etWidgetClose" class="etclose">&times;</span><iframe id="etifr" src="https://www.eTermin.net/widget" height="1600px" width="100%" scrolling="no" frameborder="0"></iframe>
      <script id="etwidget" src="https://www.etermin.net/js/etwidget.min.js" data-text="Click%20me" data-color="#F45917" data-colortext="#FFFFFF" data-pos="right" data-size="n"></script>
    </div>
  </div>


</body>

</html>

Does this answer your question? [Transitions on the CSS display property](https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property) — Mr T, Mar 23 '21 at 10:57

en0ndev · Answer 1 · 2021-03-23T11:23:48.667

Shouldn't use display:none for animation elements.

$('#etwidgetBtn').click(function(){

$('.etwidget').css({
'pointer-events':'auto',
'opacity':'1',
});

});

#etwidgetModal {
    height: 88% !important;
    position: fixed !important;
    top: 20px !important;
    right: 25px;
}

.etwidget {
    display:block !important; /* add */
    pointer-events: none; /* add */
    opacity: 0;
    position: fixed;
    z-index: 999;
    padding-top: 0;
    width: 100%;
    max-width: 500px;
    overflow: auto;
    position: absolute;
    top: 0;
    transition: opacity .5s ease-out, transform .5s ease-out, -webkit-transform .5s ease-out;
    background: #fff;
    border-left: 1px solid rgba(0, 0, 0, .1);
    border-right: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 .0625em .25em rgba(0, 0, 0, .2);
    right: 0;
    z-index: 100000;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<html>

<body style="height: 5000px;">
    <button id="etwidgetBtn" class="etwidgetBtn"type="button">Click me</button>
    <div id="etwidgetModal" class="etwidget">
        <div class="etcontent"><span id="etWidgetClose" class="etclose">&times;</span><iframe id="etifr" src="https://www.eTermin.net/widget" height="1600px" width="100%" scrolling="no" frameborder="0"></iframe>
                    <script id="etwidget" src="https://www.etermin.net/js/etwidget.min.js" data-text="Click%20me" data-color="#F45917" data-colortext="#FFFFFF" data-pos="right" data-size="n"></script>
        </div>
    </div>
</body>

</html>

transition doesn't work with css - no fade in animation

1 Answers1