如何使 jquery 动画看起来更流畅？答案

【问题标题】：How to make jquery animate look smoother?如何使 jquery 动画看起来更流畅？
【发布时间】：2017-12-15 21:55:43
【问题描述】：

我有一个多卡片布局，其中包含在单击“更多信息”链接时扩展宽度和高度的 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

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

【问题讨论】：

“更流畅”是什么意思？放大的 div 是否应该在其他 div 之上？
@ItayGanor 我尝试使用克隆方法进行类似的操作，但我一直遇到问题，因为当需要使用 .html('') 从顶部移除卡时，我会丢失克隆和原卡。对于将点击的卡片置于所有其他卡片之上，您有什么建议吗？

标签： javascript jquery css jquery-animate

【解决方案1】：

Width 和 height 属性不像 CSS3 转换那样硬件加速，不幸的是，没有办法以任何方式使用 CSS3 转换“伪造”这些属性 - 例如位置属性（左、右等）可以与 CSS3 过渡交换。所以，要保持你在笔中显示的效果，你真的无能为力。

我会尝试以与您尝试实现的效果相似的不同方式重新创建相同的效果 - 例如，出现一个隐藏元素并将 opacity 从 0 更改为 1，然后“闪烁”内容。还可以在制作单卡动画之前尝试对卡片的其余部分进行动画处理，但这需要大量的 JavaScript 以保持流畅和硬件加速。

另外，如果性能是一个问题，并且您计划在移动设备上使用，请注意粗体 box-shadow，它在渲染时可能对硬件要求很高。

【讨论】：