使用jQuery的CSS空格平滑过渡

Question

我试图使CSS过渡持续时间在通过jQuery更改后显得更平滑，以便在单击描述文本时，空格过渡为正常（打开演示并单击描述文本以了解我的意思）。 我已经看了很多其他文章，但实际上似乎没有什么可以解决这个问题。

目前，我仅设法使其正确地应用CSS，但没有按照我的意愿对其进行动画处理。 我试过了：

$('.flex-text.description').click(function() {
    $(this).animate({whiteSpace: 'normal'});

});

起初我以为whiteSpace应该是['white-space']或'white-space'以及其他组合，但是似乎没有任何效果。

有谁知道为什么这不起作用，以及如何使其起作用？ 我希望大约需要500毫秒左右的时间才能完全过渡。 感谢您的帮助-主要代码如下：

 $('.flex-text.description').click(function() { $(this).toggleClass('white-space-normal', 500); }); 

 /* Customisations */ /* Interaction */ .white-space-normal { white-space: normal !important; transition: all 0.4s ease; /* not working */ } /* Buttons */ .flex-item .flex-btn-2 { background-color: #286090 !important } /* Shop */ .shopPageListingContainer { display: flex; flex-flow: row wrap; } .flex-item form { margin: auto auto 0 auto; width: 100%; } /* Generic Structure */ .sad-flex { display: flex; flex-flow: row wrap; } .flex-item { width: 23.5%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } .flex-item:not(:nth-of-type(4n+1)) { margin-left: 2% } .flex-item:nth-of-type(n+5) { margin-top: 2% } .flex-item-image-link { width: 100% } .flex-item img { width: 100%; background-size: cover; background-position: center; } .flex-item, .flex-text-content { display: flex; flex-direction: column; align-items: center; font-size: 1em; text-align: center; position:relative; font-family: arial; /* perhaps remove */ justify-content: flex-start; } .flex-text-content { padding: 10px; /* for ellipsis */ width: 100%; overflow: hidden; } .flex-item .flex-text.header { margin-bottom: 0; font-weight: 700; width: 100%; } .flex-item .flex-text.header a { color: #000 } .flex-item .flex-text.price { padding-top: 20px; font-size: 1.4em; color: grey; } .flex-item .flex-text.description { font-size: 1em; padding-top: 20px; max-height: 6em; /* limits to 3 lines of text */ overflow: hidden; /* ellipsis below: */ white-space: nowrap; text-overflow: ellipsis; width: 100%; max-width: 650px; /* solves the white-space nowrap width pushout problem */ } .flex-item .flex-btn { border: none; outline: 0; padding: 12px; color: #fff; background-color: #000; cursor: pointer; width: 100%; font-size: 1.3em; margin: auto auto 0 auto; } .flex-item .flex-btn:hover { opacity: 0.7 } .flex-item ul { text-align: left } @media (max-width: 767px) { .flex-item:not(:nth-of-type(4n+1)) { margin-left: 3% } .flex-item { width: 48.5% } .flex-item:not(:nth-of-type(even)) { margin-left: 0 } .flex-item:nth-of-type(n+3) { margin-top: 3% } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="flex-item"> <a class="flex-item-image-link" href=""><img src="https://cml.sad.ukrd.com/tp/3x2/" style="background-image:url(https://cml.sad.ukrd.com/image/219568.jpg)"></a> <div class="flex-text-content"> <h2 class="flex-text header"><a href="">Caramel Shortbread Bites</a></h2> <span class="flex-text price">£1.20</span> <span class="flex-text description" style="">description token should go here description token should go here description token should go here description token should go here</span> </div> <button type="submit" value="Buy" class="flex-btn">Add to Cart</button> </div> 

Answer 1

如果要平滑过渡，可以将max-height属性从2更改为6。

更改以下2个CSS类：

.white-space-normal {
    white-space: normal !important;
    transition: all 0.4s ease; /* not working -> now working */
    max-height: 6em !important;
}

.flex-item .flex-text.description {
    font-size: 1em;
    padding-top: 20px;
    max-height: 6em; /* limits to 3 lines of text */
    overflow: hidden;
    /* ellipsis below: */
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 650px; /* solves the white-space nowrap width pushout problem */
    max-height: 2em;
}

注意，toggleClass现在将max-height属性从2em转换为6em。

演示： https : //codepen.io/anon/pen/yGZyqP

- 编辑 -

要对折叠文本进行过渡，则可以使用javascript setTimeout（）函数来进行过渡。

CSS类将是这样的：

.flex-item .flex-text.description {
    font-size: 1em;
    padding-top: 20px;
    overflow: hidden;
    /* ellipsis below: */
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 650px; /* solves the white-space nowrap width pushout problem */
    height: 2em;
    transition: height 1s ease;
}

.white-space-normal {
    padding-top: 20px;
    white-space: normal !important;
    height: 6em !important;
    transition: all 1s ease;
}

而javascript代码将是这样的：

$('.flex-text.description, .white-space-normal').click(function() {
    $el = $(".description");

    if ($el.hasClass("white-space-normal")) {
        setTimeout(function(){
            $el.removeClass("white-space-normal");
        }, 500);
    } else {
        setTimeout(function(){
            $el.addClass("white-space-normal");
        }, 500);
    }
});

新演示： https : //codepen.io/anon/pen/REvmxR