Question

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

目前，我仅设法使其正确地应用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

使用jQuery的CSS空格平滑过渡

1 个答案: