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>

Answer 1

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

Question

1 answers

solution1
0 2021-03-23 11:09:36

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

Question

1 answers

solution1 0 2021-03-23 11:09:36

solution1
0 2021-03-23 11:09:36