Question

我有一个带有div的多卡片布局，点击＆＃34;更多信息＆＃34;可以扩展宽度和高度。链接。动画可能更顺畅，但不知道如何做到这一点。

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

我正在努力使最终结果在响应点击次数的方式上变得更加流畅。更多信息＆＃34;和＆＃34;返回＆＃34;。任何建议都非常感谢。

Answer 1

Width和height属性不像CSS3转换那样硬件加速，遗憾的是没有办法伪造＆＃39;这个使用CSS3的属性以任何方式进行转换 - 例如可以与CSS3转换交换的位置属性（左，右等）。所以，为了保持你在笔中显示的效果，你真的不能做太多。

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

此外，如果性能问题并且您打算在移动设备上使用，请注意那些在呈现时可能是硬件要求的粗体box-shadow。

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

1 个答案: