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: '<p style="font-size: 14px; border-left:5px solid #dddddd; padding: 15px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;">' + '<span id="textfold" style="display:block; overflow:hidden;">{{designer.des}}</span>' + '<br />' + '<span style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore}}</span>' + '</p>', link: function(scope, element, attrs) { var height; var maxheight; function textfold() { height = angular.element('#textfold').height(); maxheight = angular.element('#textfold').height(); } scope.$watch('designer.des', function(data) { if (data) { textfold(); } }) var isExtend = true; scope.isMore = "折叠"; scope.more = function() { var minheight = 23; if (isExtend) { if (height >= minheight) { document.getElementById('textfold').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('textfold').style.height = height + "px"; setTimeout(function() { scope.more(); }, 1); height += 10; } else { scope.isMore = "折叠"; scope.$apply(); isExtend = !isExtend; height -= 10; } } } } } })
Zunächst muss es darin bestehen, die komponentenbasierte Vorlage und den Verwendungsmodus von Angular zu definieren
restrict: 'EA', template: '<p style="font-size: 14px; border-left:5px solid #dddddd; padding: 15px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;">' + '<span id="textfold" style="display:block; overflow:hidden;">{{designer.des}}</span>' + '<br />' + '<span style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore}}</span>' + '</p>',
var height; var maxheight;
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(); }
angular.element('#textfold').height()
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 wirdsetTimeout(function() { scope.more(); }, 1);
Fügen Sie am besten unten einen weiteren Satz hinzu
document.getElementById('textfold').style.height = height + "px";
Verwandte Empfehlungen:
css2D Special Effects Transform--Text Folding Effect_html/css_WEB-ITnose
scope.$apply();
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!