如何使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

我试图让最终结果更响应“响应”更多信息“和”返回“的点击。任何建议都非常感谢。

Answer 1

Width和height属性不像CSS3转换那样硬件加速，遗憾的是没有办法以任何方式使用CSS3变换“伪造”这些属性 - 例如可以与CSS3过渡交换的位置属性（左，右等）。因此，为了保持您在笔中显示的效果，您实际上做不了多少。

我会尝试以一种类似于你想要达到的效果的不同方式重新创建相同的效果 - 例如，出现隐藏元素并将opacity从0更改为1然后'闪烁'内容。还尝试在进行单卡动画之前动画其余的卡片，但是这需要大量的javascript才能保持平滑和硬件加速。

此外，如果性能是一个问题，并且您计划在移动设备上使用，请注意那些在渲染时可能需要硬件的大胆的box-shadow。