Simple implementation of Angular text folding and expansion effect

The Angular text folding and expanding effect is also a very interesting function. This article mainly introduces the principle analysis of the Angular text folding and expanding component. The editor thinks it is quite good. Now I will share it with you and give you a reference. I hope it can Help everyone.

I wrote an Angular text folding component. This component can actually be used in many places. The effect is as follows

The effect after expansion

The effect after folding

Put all the code first. When using it, you only need to add the code you need. Just replace the displayed text {{designer.des}} with the data that needs to be bound to your router

.directive('textfold', function() {
    return {
      restrict: 'EA',
      template: &#39;<p style="font-size: 14px; border-left:5px solid #dddddd; padding: 15px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;">&#39; + &#39;<span id="textfold" style="display:block; overflow:hidden;">{{designer.des}}</span>&#39; + &#39;<br />&#39; + &#39;<span style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore}}</span>&#39; + &#39;</p>&#39;,
      link: function(scope, element, attrs) {
        var height;
        var maxheight;
        function textfold() {
          height = angular.element(&#39;#textfold&#39;).height();
          maxheight = angular.element(&#39;#textfold&#39;).height();
        }
        scope.$watch(&#39;designer.des&#39;, function(data) {
          if (data) {
            textfold();
          }
        })
        var isExtend = true;
        scope.isMore = "折叠";
        scope.more = function() {
          var minheight = 23;
          if (isExtend) {
            if (height >= minheight) {
              document.getElementById(&#39;textfold&#39;).style.height = height + "px";
              setTimeout(function() {
                scope.more();
              }, 1);
              height -= 10;
            } else {
              scope.isMore = "查看更多...";
              scope.$apply();
              isExtend = !isExtend;
              height += 10;
            }
          } else {
            if (height <= maxheight) {
              document.getElementById(&#39;textfold&#39;).style.height = height + "px";
              setTimeout(function() {
                scope.more();
              }, 1);
              height += 10;
            } else {
              scope.isMore = "折叠";
              scope.$apply();
              isExtend = !isExtend;
              height -= 10;
            }
          }
        }
      }
    }
  })

I will analyze this component sentence by sentence. The idea

The first thing to do is to define the Angular component template and usage mode

restrict: 'EA',
template: &#39;<p style="font-size: 14px; border-left:5px solid #dddddd; padding: 15px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;">&#39; + &#39;<span id="textfold" style="display:block; overflow:hidden;">{{designer.des}}</span>&#39; + &#39;<br />&#39; + &#39;<span style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore}}</span>&#39; + &#39;</p>&#39;,

EA is to use elements and Attribute methods can display this plug-in in the DOM. I can reuse the component in the form of or in the form of

Later we use link to define a function

var height;
var maxheight;

. One of these two variables is the height after folding at this time (this is during the process of expanding into folding Constantly changing, the last folded is equal to minheight), the height obtained when a text is fully expanded

function textfold() {
          height = angular.element('#textfold').height();
          maxheight = angular.element('#textfold').height();
        }
        scope.$watch('designer.des', function(data) {
          if (data) {
            textfold();
            scope.more();
          }
        })

These two sentences are actually very important. When we When obtaining the height of the text, it is necessary to capture the change of the text (the height after the text is fully rendered), so we use scope.$watch to capture the change of designer.des. When data is not empty, that is, after the text has been rendered

if (data) {
            textfold();
          }

Then execute the callback function textfold to get the height of the current text. I have temporarily tried this method to get the height of the text after rendering

If executed sequentially instead of callback

angular.element('#textfold').height()

will only get the default height of the span tag

You can also add a little trick here, add the sentence scope.more();

if (data) {
            textfold();
            scope.more();
          }

This way, you can expand the page after it is rendered, and then Folding, then when we enter the page, it will be in the folded state by default. In the program, to write this effect, we usually let the text expand to obtain the height and then return to the folded state, so that the incoming page is the folded text. Status effect

var isExtend = true;This sentence is to let the following scope.more enter the first branch folding state

setTimeout(function() {
                scope.more();
              }, 1);

This sentence It's a recursion, which is actually equivalent to implementing jQuery's animate's text box expansion animation. It's just that a recursion is used here to continuously judge the status and change the height value

and then change it by changing scope.isMore Is it view more...or collapse?

Since this is a DOM operation

document.getElementById('textfold').style.height = height + "px";

it’s best to add it below One more sentence

scope.$apply();

to get the DOM changes

In fact, the general idea is very simple, and other places are also easy to understand. , you can try it yourself.

Related recommendations:

css2D special effects transform--text folding effect_html/css_WEB-ITnose

JavaScript compatible with IE6 close Implementation cases of folding and unfolding effects

Recommended articles about folding

The above is the detailed content of Simple implementation of Angular text folding and expansion effect. For more information, please follow other related articles on the PHP Chinese website!