如何为我的 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>