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

私は最終的な結果は、ワシントン州より流体で作るしようとしていますそれは "More Info"と "Back"のクリックに反応します。どんな提案も大歓迎です。

Answer 1

Widthとheight特性がハードウェアはCSS3の変換のように加速され、残念ながら「偽」このプロパティはCSS3を使用する方法はありませんどのような方法で変換されていない - のような例示的な位置特性について（左、右など）に交換することができますCSS3トランジションでだから、あなたがペンに表示している効果を保つために、あなたは本当に多くをすることができません。

たとえば、隠された要素が表示され、opacityが0から1に変更され、コンテンツがフラッシュされるなど、同じエフェクトを達成しようとしているエフェクトに似た別の方法で再作成しようとします1枚のカードのアニメーションを行う前にカードの残りの部分をアニメートしてみてください。しかし、スムーズでハードウェアを高速化するためには、重いjavascriptが必要になります。

パフォーマンスが問題でモバイルデバイスでの使用を計画している場合は、太字のbox-shadowに注意してください。これは、レンダリング時にハードウェアが要求される可能性があります。