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

Answer 1

通常，您的问题是，每次单击都将div附加到正文中。因此，该动画无法正常工作。另外，带有图片的div不会进行动画处理，这是因为您将其附加到正文中，然后立即尝试对其进行动画处理以显示出来。

我已经稍微缩短了您的功能。 requestAnimationFrame的解释也很少。为了防止在将div附加到正文之后立即出现动画，我正在等待浏览器准备就绪，以渲染新帧，然后还等待20ms（即1000ms（1秒）/ 60帧= 16.66 ms）进行60fps动画播放。向上舍入到20。甚至可以舍入到17。如果没有超时功能，它将以50/50运行。

作为旁注。通过使用CSS类而不是jQuery .css()函数，可以进一步减少所有这些代码。但是我只是专注于使其工作。

$('img[data-enlargable]')
  .addClass('img-enlargable')
  .click(function(){
    $('.open-overlay')
      .css({
        opacity : 1,
        visibility : 'visible'
      });
    
    const IMAGE_POPUP = $('<div>')
      .css({
        opacity:'0',
        transition:'all .3s ease',
        visibility: 'hidden',
        backgroundSize: 'contain',
        width:'90%', height:'90%',
        position:'fixed',
        zIndex:'999999',
        visibility: 'hidden',
        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',
              visibility: 'hidden'
            });  
      })
      .appendTo('body');
    
    window.requestAnimationFrame(() => {
      setTimeout(() => {
        const IMAGE_SOURCE = this.src;
        IMAGE_POPUP
          .css({
            opacity:'1',
            background: 'url(' + IMAGE_SOURCE + ') no-repeat center',
            visibility: 'visible',
          });
      }, 20);
    });
  });

.open-overlay {
  opacity: 0;
  transition: all .3s ease;
  visibility: hidden;
  background: rgba(0,0,0,.5);
  background-size: contain;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: zoom-out;
}

<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>

以下是建议的解决方案：

$('img[data-enlargable]')
  .addClass('img-enlargable')
  .click(function(){
    $('.open-overlay').addClass('is-visible');
    
    const IMAGE_POPUP = $('<div>')
      .addClass('image_popup')
      .click(function(){

          //when pressed on image - close
          $(this).remove();

          $('.open-overlay').removeClass('is-visible');
      })
      .appendTo('body');
    
    window.requestAnimationFrame(() => {
      setTimeout(() => {
        const IMAGE_SOURCE = this.src;
        IMAGE_POPUP
          .addClass('is-visible')
          .css({
            background: 'url(' + IMAGE_SOURCE + ') no-repeat center',
          });
      }, 20);
    });
  });

.open-overlay {
  opacity: 0;
  transition: all .3s ease;
  visibility: hidden;
  background: rgba(0,0,0,.5);
  background-size: contain;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: zoom-out;
}

.open-overlay.is-visible, .image_popup.is-visible {
  opacity: 1;
  visibility: visible;
}

.image_popup {
  opacity: 0;
  transition: all .3s ease;
  visibility: hidden;
  background-size: contain;
  width: 90%;
  height: 90%;
  position: fixed;
  z-index: 999999;
  visibility: hidden;
  top: 5%;
  bottom: 0;
  left: 5%;
  right: 0;
  cursor: zoom-out;
}

<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>

Answer 2

我不明白您为什么在修改CSS后使用.appendTo('body');。删除该代码足以使代码正常工作：

$('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'
		  
		
          });
    
    });
		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/3.3.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>

话虽这么说，您可以整理一下。我建议您将.open-overlay CSS明确地定义在其他地方，然后仅使用jQuery修改所需的部分。例如，您不需要修改 每次执行操作时，都可以使用transition属性，可以在CSS中定义该属性，并且只修改jQuery中的opacity和visibility属性。这就是我的意思：

$( document ).ready(function() {

$('img[data-enlargable]').addClass('img-enlargable').click(function(){
    	$('.open-overlay').css({	  
          opacity: '1',
          visibility: 'visible',
          cursor: 'zoom-out'
    
    });
		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',
          visibility: 'hidden'
          });
          }).appendTo('body');
          
		});
         }) 
          

.open-overlay {
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: all 0.3s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

我还建议您检查一下该示例，该示例说明了如何实现与您尝试执行的操作非常相似的操作： https://www.w3schools.com/howto/howto_css_modal_images.asp