Einfache Implementierung des Angular-Textfaltungs- und Erweiterungseffekts-js-Tutorial-php.cn

Einfache Implementierung des Angular-Textfaltungs- und Erweiterungseffekts

小云云

Freigeben： 2017-12-18 11:43:56

Original

2775 Leute haben es durchsucht

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(&#39;textfold&#39;, function() {
    return {
      restrict: &#39;EA&#39;,
      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;
            }
          }
        }
      }
    }
  })

Nach dem Login kopieren

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: &#39;EA&#39;,
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;,

Nach dem Login kopieren

EA ist, das Plug-in kann im DOM mithilfe von Elementen und Attributen angezeigt werden, entweder in der Form p textfold="Wsscat">

Nach der Wiederverwendung dieser Komponente definieren wir mit link eine Funktion

var height;
var maxheight;

Nach dem Login kopieren

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(&#39;#textfold&#39;).height();
          maxheight = angular.element(&#39;#textfold&#39;).height();
        }
        scope.$watch(&#39;designer.des&#39;, function(data) {
          if (data) {
            textfold();
            scope.more();
          }
        })

Nach dem Login kopieren

, 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();
          }

Nach dem Login kopieren

Bei sequentieller Ausführung anstelle von Callback

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

angular.element(&#39;#textfold&#39;).height()

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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(&#39;textfold&#39;).style.height = height + "px";

Nach dem Login kopieren

Verwandte Empfehlungen:

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

scope.$apply();

Nach dem Login kopieren

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!