jquery 애니메이션을 더 부드럽게 보이게 만드는 방법은 무엇입니까?

Question

"추가 정보"링크를 클릭하면 너비와 높이가 확장되는 div가있는 다중 카드 레이아웃이 있습니다. 애니메이션은 더 부드럽지만 어떻게하는지 잘 모를 수 있습니다.

CSS :

.card{ 
    width: 300px; 
    height: 500px; 
    position: relative; 
    box-shadow:none; 
    display:inline-block; 
    margin: 10px; 
    border-radius: 5px; 
    background-color: #fff; 
    text-align: left; 
    box-shadow: 2px 3px 12px 0px rgba(0,0,0,0.75); 
    transition: all .8s; 
} 

HTML :

<div class="card" data-filter="family"> 
        <div class="card-img-container"></div> 
        <div class="card-text-container"> 
         <h2 class="card-title">Card Title</h2> 
         <p class="card-body" 
         data-orig-text="Get your Kicks on Route 66 and explore national parks, monuments and historical site while visiting native animals, including reptiles. Meet Smokey Bear and friends and learn how to protect, respect and connect with nature and its animals. WTF" 

         data-short-text="Get your Kicks on Route 66 and explore national parks, monuments and historical site while visiting native animals, including reptiles. Meet Smokey Bear and friends and l..."> </p> 

         <p class="card-location"> 
          Location: Center Patio <br> 
          Time: Fri 12pm - 11pm | Sat & Sun 10am - 11pm | Labor Day 12pm - 11pm <br> 
          Cost: FREE <br> 
          Age: ALL AGES <br> 
         </p> 
        </div> 
        <div class="card-link-container"> 
         <a class="more-link">More Info</a> 
        </div> 
       </div> 

jQuery를 :

moreLinks.click(function(event){ 
     var cardClicked = $(this).parents('.card'); 
     var textContainer = cardClicked.find('.card-text-container'); 
     var cardClickText = cardClicked.find('.card-body'); 
     var locationInfo = cardClicked.find('p.card-location'); 

     /*Checks to see if card is already open*/ 
     if($(this).html() === 'Back'){ 
      if($(window).width() >= 768){ 
       $("html, body").animate({ scrollTop: 400 }, "slow"); 
      } 
      cardClickText.text(cardClickText.attr('data-short-text')); 
      locationInfo.fadeOut('easeOutExpo'); 

      cardClicked.css({ 
       'width': '300px', 
       'height' : '500px', 
       'margin' : '10px', 
       'display': 'inline-block' 
      }); 
      cardClicked.find('.card-img-container').css({ 
       'height' : '200px' 
      }); 
      $(this).html('More Info'); 
      textContainer.removeClass('expanded'); 
     } 

     /*If it isnt open, then depending on device transform width and height or just height*/ 
     else{ 
      $(this).html('Back'); 

      cardClickText.text(cardClickText.attr('data-orig-text')); 
      locationInfo.fadeIn('easeInQuint'); 
      var pos = cardClicked.position(); 

      /*If desktop*/ 
      if($(window).width() >= 768){ 
       cardClicked.css({ 
        'display': 'block', 
        'margin' : '0 auto', 
        'width': '750px', 
        'height' : '750px' 
       }); 

       cardClicked.find('.card-img-container').css({ 
        'height' : '350px' 
       }); 


      } 
      /*If mobile*/ 
      else{ 
       cardClicked.css('height', '750px'); 
      } 
      textContainer.addClass('expanded'); 
      // $("html, body").animate({ scrollTop: pos.top + 900 }, "slow"); 
     } 

    }); 

Codepen

내가 최종 결과는 워싱턴에서 더 유동적이 될 수 있도록 노력하고있다 y "추가 정보"및 "뒤로"클릭에 응답합니다. 어떤 제안이라도 대단히 감사합니다.

Answer 1

Width 및 height 속성은 하드웨어 CSS3 변환들과 같은 가속 불행히도 '가짜'이 속성 CSS3를 사용하는 방법이 없다 어떠한 방식으로 변형되지 않은 - 같은 예시적인 위치 속성 (왼쪽, 오른쪽, 등)를 교환 할 수있다 CSS3 전환이 있습니다. 따라서 펜에 표시되는 효과를 유지하려면 실제로 많은 것을 할 수 없습니다.

예를 들어, 숨겨진 요소가 나타나고 opacity을 0에서 1로 변경 한 다음 내용을 '플래시'하는 것과 같이 다른 효과를 내기 위해 노력하고 싶습니다. 한 카드 애니메이션을하기 전에 나머지 카드에 애니메이션을 적용 해보십시오. 그러나 매끄럽고 하드웨어 가속을 유지하려면 무거운 자바 스크립트가 필요합니다.

성능이 문제가되고 모바일 장치에서 사용할 계획 인 경우 굵게 표시된 box-shadow에주의를 기울여 렌더링 할 때 하드웨어가 필요할 수 있습니다.