Einfache Implementierung des Angular-Textfaltungs- und Erweiterungseffekts

Angular-Textfaltungs- und -erweiterungseffekt ist auch eine sehr interessante Funktion. In diesem Artikel wird hauptsächlich die prinzipielle Analyse der Angular-Textfaltungs- und -erweiterungskomponente vorgestellt Referenz. Ich hoffe, es kann allen helfen.

Ich habe eine Angular-Textfaltungskomponente geschrieben. Der Effekt ist wie folgt:

Der Effekt nach dem Falten

Geben Sie den gesamten Code zuerst ein Um hinzuzufügen, was Sie benötigen, ersetzen Sie einfach den angezeigten Text {{designer.des}} durch die Daten, die an Ihren Router gebunden werden müssen

.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;
            }
          }
        }
      }
    }
  })

My Satz-für-Satz-Analyse unten Die Idee dieser Komponente

Zunächst muss es darin bestehen, die komponentenbasierte Vorlage und den Verwendungsmodus von Angular zu definieren

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 ist, das Plug-in kann im DOM mithilfe von Elementen und Attributen angezeigt werden, entweder in der Form a0bcc65b642cef835222289e0b59a11672d6f4e402c93e7ffaeb80c6e7902589 p textfold="Wsscat">94b3e26ee717c64999d7867364b1b4a3 Nach der Wiederverwendung dieser Komponente definieren wir mit link eine Funktion

var height;
var maxheight;

Eine dieser beiden Variable ist die Höhe nach dem Falten zu diesem Zeitpunkt (dies ist nach dem Erweitern. Sie ändert sich während des Faltvorgangs kontinuierlich. Nach dem endgültigen Falten entspricht sie der Höhe, die man erhält, wenn ein Text vollständig erweitert wird

Diese beiden Sätze sind tatsächlich sehr wichtig. Wenn wir die Höhe des Textes ermitteln, müssen wir die Änderung des Textes erfassen (die Höhe, nachdem der Text vollständig gerendert wurde). Daher verwenden wir „scope.$watch“, um die Änderung von „designer.des“ zu erfassen, wenn die Daten nicht leer sind, d. h. nachdem der Text gerendert wurde

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

, dann führe die Callback-Funktion textfold aus, um die Höhe des aktuellen Textes zu erhalten. Ich habe diese Methode vorübergehend ausprobiert, um die Höhe nach dem Rendern zu erhalten

if (data) {
            textfold();
          }

Bei sequentieller Ausführung anstelle von Callback

erhält nur das Span-Tag Es ist nur die Standardhöhe

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

Sie können auch einen kleinen Trick hinzufügen Fügen Sie hier einen Satz hinzu Wenn wir die Seite betreten, befindet sie sich standardmäßig im minimierten Zustand. Wenn wir diesen Effekt schreiben, lassen wir den Text normalerweise zuerst expandieren, um die Höhe zu erhalten. Dann kehren wir in den gefalteten Zustand zurück, um den gefalteten Effekt zu erzielen Textstatus der eingehenden Seite

var isExtend = true; dieser Satz soll den folgenden Scope.more in den gefalteten Zustand des ersten Zweigs eintreten lassen

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

Dieser Satz ist eine Rekursion, die tatsächlich der Implementierung der Textfelderweiterungsanimation von jQuerys Animation entspricht, mit der Ausnahme, dass hier eine Rekursion verwendet wird, um den Status kontinuierlich zu beurteilen und den Höhenwert zu ändern 🎜>Ändern Sie es dann, indem Sie „scope.isMore“ ändern, um mehr zu sehen ... oder zu reduzieren

Da hier DOM-Manipulation verwendet wird

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

Fügen Sie am besten unten einen weiteren Satz hinzu

, um die DOM-Änderungen zu erhalten

Tatsächlich ist die allgemeine Idee sehr einfach und auch andere Teile sind leicht zu verstehen. Sie können es ausprobieren.

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

Verwandte Empfehlungen:

css2D Special Effects Transform--Text Folding Effect_html/css_WEB-ITnose

scope.$apply();

JavaScript kompatibel mit IE6 close Beispiele von Umsetzung von Falt- und Entfaltungseffekten

Empfohlene Artikel zum Thema Falten

Das obige ist der detaillierte Inhalt vonEinfache Implementierung des Angular-Textfaltungs- und Erweiterungseffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!