如何为我的 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 附加到正文后立即动画，我正在等待浏览器准备就绪，渲染新帧，然后等待 20 毫秒，即 1000 毫秒(1 秒(/60 帧 = 16.66 毫秒以获得 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