Question

我使用CSS和javascript尝试了Text简写。如下

HTML

<div class=" comment more">Apache Subversion (often abbreviated SVN, after its command name svn) is a software versioning and revision control system distributed as open source under the Apache License. Software developers use Subversion to maintain current and historical versions of files such as source code, web pages, and documentation.Apache Subversion (often abbreviated SVN, after its command name svn) is a software versioning and revision control system distributed as open source under the Apache License. Software developers use Subversion to maintain current and historical versions of files such as source code, web pages, and documentation</div>

CSS

.comment { //
    width: 100%; //
    background-color: #f0f0f0; //
    margin: 10px;
}

a.morelink {
    text-decoration: none;
    outline: none;
}

.morecontent span {
    -webkit-transition: width 2s;
    display: none;
}

JS

var showChar = 100;
        var ellipsestext = "...";
        var moretext = "more";
        var lesstext = "less";
        $('.more').each(function() {
            var content = $(this).html();

            if(content.length > showChar) {

                var c = content.substr(0, showChar);
                var h = content.substr(showChar-1, content.length - showChar);

                var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

                $(this).html(html);
            }

        });

        $(".morelink").click(function(){
            if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            } else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });

Myfiddle：https://jsfiddle.net/Balakumar_B/v3xnpxvt/

在上面的代码中，如果我点击更多链接突然显示其余内容但我想慢慢显示其余内容。我不知道在哪里使用转换以及如何使用..所以任何人都可以建议使用转换的技巧以及在哪里使用它？

Answer 1

你不能在display：none;上使用css过渡; / display：block;

但你可以试试jQuery slideToggle（）; 我创造了一个快速小提琴。它并不完美。仅举例来说

[https://jsfiddle.net/v4x564jf/][1]

如何使用Css过渡？

1 个答案: