如何为我的 Javascript 代码添加平滑过渡？

Question

首先，对于我糟糕的 javascript 知识感到抱歉。我昨天才开始学习它，在短时间内理解它是相当困难的。我是一名设计师，所以编码不是我的专长，但我想至少学习基础知识。所以现在借口已经够多了。我想知道为什么在我的代码中，当我按下图像时，当它放大时没有动画出现，但是当我关闭它时 - 动画出现了。我试过在任何地方添加不透明度和过渡$('img[data-enlargable]')  .addClass('img-enlargable')  .click(function(){    $('.open-overlay')      .css({        opacity: '1',        transition:'all .3s ease',        visibility: 'visible',        background: 'RGBA(0,0,0,.5)',        backgroundSize: 'contain',        width:'100%', height:'100%',        position:'fixed',        zIndex:'999999',        top:'0',        bottom:'0',        left:'0',        right:'0',        cursor: 'zoom-out'      })      .click(function(){        //when pressed on open-overlay div - close        $('<div>')          .css({            opacity:'0',            transition:'all .3s ease',            visibility: 'hidden'          });      })      .appendTo('body');    var src = $(this).attr('src');    $('<div>')      .css({        opacity:'1',        transition:'all .3s ease',        background: 'url('+src+') no-repeat center',        backgroundSize: 'contain',        width:'90%', height:'90%',        position:'fixed',        zIndex:'999999',        visibility: 'visible',        top:'5%',        bottom:'0',        left:'5%',        right:'0',        cursor: 'zoom-out'      })      .click(function(){          //when pressed on image - close          $(this).remove();          $('.open-overlay')            .css({              opacity: '0',              transition:'all .3s ease',              visibility: 'hidden'            });        })      .appendTo('body');  });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="work-img"><img data-enlargable style="cursor: zoom-in" src="https://www.w3schools.com/howto/img_snow.jpg" /></div><div class="open-overlay"></div>