Implémentation simple des effets de pliage et d'expansion de texte angulaire

L'effet de pliage et d'expansion de texte angulaire est également une fonction très intéressante. Cet article présente principalement l'analyse principale des composants de pliage et d'expansion de texte angulaire. L'éditeur pense que c'est plutôt bon. référence. J'espère que cela pourra aider tout le monde.

J'ai écrit un composant de pliage de texte angulaire. Ce composant peut en fait être utilisé dans de nombreux endroits. L'effet est le suivant

L'effet étendu

.

L'effet après le pliage

Mettez tout le code en premier Lorsque vous l'utilisez, il vous suffit de le mettre en premier. pour ajouter ce dont vous avez besoin Remplacez simplement le texte affiché {{designer.des}} par les données qui doivent être liées à votre routeur

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

Mon analyse phrase par phrase ci-dessous L'idée de ce composant

Tout d'abord, il doit s'agir de définir le modèle et le mode d'utilisation du composant angulaire

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 est , le plug-in peut être affiché dans le DOM à l'aide d'éléments et d'attributs, soit sous la forme textfold="Wsscat">

Après avoir réutilisé ce composant, nous utilisons link pour définir une fonction

var height;
var maxheight;

Une de ces deux variables est la hauteur après le pliage à ce moment (c'est après l'expansion. Elle change continuellement pendant le processus de pliage. Après le pliage final, elle est égale à la hauteur minimale obtenue lorsqu'un texte est complètement développé

<🎜). >

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

Ces deux phrases sont en fait très importantes. Lorsque nous obtenons la hauteur du texte, nous devons capturer le changement du texte (la hauteur une fois le texte entièrement rendu), nous utilisons donc scope.$watch pour capturer le changement de designer.des Lorsque les données ne sont pas vides, c'est-à-dire après que le texte a été rendu

if (data) {
            textfold();
          }

<. 🎜>, puis exécutez la fonction de rappel textfold pour obtenir la hauteur du texte actuel. J'ai temporairement essayé cette méthode pour obtenir la hauteur après le rendu

Si elle est exécutée séquentiellement au lieu de rappel<🎜. >

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

n'obtiendra que la balise span C'est juste la hauteur par défaut

Vous pouvez également ajouter une petite astuce ici , ajoutez une phrase scope.more();

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

De cette façon, la page peut être développée d'abord après le rendu, puis pliée. nous entrons dans la page, elle sera dans l'état replié par défaut. Dans le programme, lors de l'écriture de cet effet, nous laissons généralement d'abord le texte s'étendre pour obtenir la hauteur, puis revenons à l'état plié pour obtenir l'effet du texte plié. état de la page entrante

var isExtend = true; cette phrase permet au scope.more suivant d'entrer dans l'état plié de la première branche

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

Cette phrase est une phrase récursive, ce qui équivaut en fait à l'implémentation de l'animation d'expansion de la zone de texte de l'animation de jQuery, sauf qu'une récursion est utilisée ici pour juger en continu de l'état et modifier la valeur de la hauteur

<. 🎜>Ensuite, changez-le en changeant scope.isMore pour en voir plus... ou réduisez

Puisque cela utilise la manipulation DOM

Il est préférable d'ajouter une phrase supplémentaire ci-dessous

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

pour obtenir les modifications du DOM

scope.$apply();

En fait, l’idée générale est très simple et d’autres parties sont également faciles à comprendre. Vous pouvez l’essayer.

Recommandations associées :

transformation d'effets spéciaux CSS2D - pliage de texte effect_html/css_WEB-ITnose

JavaScript compatible avec IE6 fermer Exemples de mise en œuvre des effets de pliage et de dépliage

Articles recommandés sur le pliage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!