الإنتقال بين views مع animation في angular js

محمد المتوكل · 3 يونيو 2020

السلام عليكم ورحمة الله وبركاته

لدي برنامج ويب (مشابه لـ "أنا" ) وأستخدم فيه angular Js لعمل Route بين الصفحات مع العلم أني لا أستعمل angular من cli وأريد أن أضيف تحريك يظهر عندما ينتقل المستخدم بين ال views ولقد بحثت في google ووجدت أغلب الدروس تتحدث عن الذين يستعملون angular cli

أرجو من كل من يستطيع أن ينفعني أن يشارك جزاكم الله خيرا

محمد ربيع زليول · 4 يونيو 2020

لإضافة animation قم بتضمين مكتبة animate:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-animate/1.7.9/angular-animate.min.js"></script>

ثم قم بإضافة وحدة ngAnimate للوحدة الرئيسية:

var app = angular.module("myApp", ["ngRoute", "ngAnimate"]);

ثم قم بكتابة Animation عن طريق CSS Animations.

ثم ضعها بملف CSS الخاص بك، مثلا قمت بإنشاء slideInRight و slideOutLeft كالتالي:

@keyframes slideInRight {
    from    { transform:translateX(100%); }
    to      { transform: translateX(0); }
}

@keyframes slideOutLeft {
    to      { transform: translateX(-100%); }
}

الآن تتبقى خطوة واحدة فقط وهي إضافة محددات لصنفي ng-enter و ng-leave.

المحدد الأول يأتي لتعريف Animation عند الإنتقال لل view.
المحدد الثاني لتعريف Animation عند مغادرة View.

.ng-enter{ animation: slideOutLeft 0.5s both ease-in; z-index: 8888; }

.ng-leave{ animation: slideInRight 0.5s both ease-in; z-index: 9999; }

ليصبح الكود الكامل كالتالي:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route/1.7.9/angular-route.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-animate/1.7.9/angular-animate.min.js"></script>

    <style>
      body {
        text-align: center;
      }
      @keyframes slideInRight {
        from {
          transform: translateX(100%);
        }
        to {
          transform: translateX(0);
        }
      }

      @keyframes slideOutLeft {
        to {
          transform: translateX(-100%);
        }
      }

      .ng-enter {
        animation: slideOutLeft 0.5s both ease-in;
        z-index: 8888;
      }
      .ng-leave {
        animation: slideInRight 0.5s both ease-in;
        z-index: 9999;
      }
    </style>
  </head>
  <body ng-app="myApp">
    <div ng-view></div>

    <a href="#/!">Main page</a>
    <a href="#!page1">Page 1</a>
    <a href="#!page2">Page 2</a>
    <a href="#!page3">Page 3</a>

    <script>
      var app = angular.module("myApp", ["ngRoute", "ngAnimate"]);
      app.config(function ($routeProvider) {
        $routeProvider
          .when("/", {
            template: "<h1>Main page</h1><p>This is the main page</p>",
          })
          .when("/page1", {
            template: "<h1>Page 1</h1><p>This is the first page</p>",
          })
          .when("/page2", {
            template: "<h1>Page 2</h1><p>This is the second page</p>",
          })
          .when("/page3", {
            template: "<h1>Page 3</h1><p>This is the third page</p>",
          });
      });
    </script>
  </body>
</html>

عدلت الملف السابق وأضفت له Animation يمكنك الإطلاع عليه من هنا.

وهذا مشروع يحتوي على بعض التفاصيل إن أحببت الإطلاع عليه من هنا.

تم التعديل في 4 يونيو 2020 بواسطة محمد ربيع زليول

Nezar Madi · 3 يونيو 2020

أهلا محمد..

ليس لدي دراية بAngular و لكن في حال كان فهمي لك صائبا فإن ما تتحدث عنه متواجد في vue و يسمى route transition و بعد البحث وجدت كذلك في angular يسمى route transition animation و يوجد صفحة تتحدث عنه بالتفصيل في الدوكمنتيشن الخاصة بالفريموورك أنصحك بالإطلاع عليها في حال لم تفعل.

رابط الصفحة ، تحياتي

محمد المتوكل · 3 يونيو 2020

بتاريخ الآن قال Nezar Madi:

أهلا محمد..

ليس لدي دراية بAngular و لكن في حال كان فهمي لك صائبا فإن ما تتحدث عنه متواجد في vue و يسمى route transition و بعد البحث و وجدت كذلك في angular يسمى route transition animation و يوجد صفحة تتحدث عنه بالتفصيل في الدوكمنتيشن الخاصة بالفريموورك أنصحك بالإطلاع عليها في حال لم تفعل.

رابط الصفحة ، تحياتي

أشكر تعاونك,

لقد إطلعت على الصفحة قبل نشري السؤال لكن وجدت أنه موجهة لمن يستعملون angular cli وأنا ليست لدي هذه الميزة لكن أقدر حقا مساعدتك وجزاك الله خيرا

محمد ربيع زليول · 3 يونيو 2020

لعمل Routing بين صفحات AngularJs.

عليك اولاً إضافة ملف مكتبة التنقل إلى صفحتك، هكذا مثلا:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route/1.7.9/angular-route.min.js"></script>

ثم قم بإضافة وحدة (module) التنقل ngRoute للوحدة الرئيسية.

var app = angular.module("myApp", ["ngRoute"]);

تقوم وحدة ngRoute بالتوجيه إلى صفحات مختلفة دون إعادة تحميل التطبيق بالكامل، بعد إضافتك لها يمكن الوصول إلى وحدة التوجيه ، عن طريق متغير $routeProvider.

الآن يجب إستخدم $routeProvider لتكوين مسارات مختلفة في تطبيقك.

مثال:

$routeProvider
.when("/", {
  template: "<h1>Main page</h1><p>This is the main page</p>",
})
  .when("/page1", {
  template: "<h1>Page 1</h1><p>This is the first page</p>",
})
  .when("/page2", {
  template: "<h1>Page 2</h1><p>This is the second page</p>",
})
  .when("/page3", {
  template: "<h1>Page 3</h1><p>This is the third page</p>",
});

يجب عليك وضع إسم المسار في المعامل (Parameter) الأول لدالة when، وتقوم بإرسال كائن (object) في المعامل الثاني.

يحتوي الكائن على عدد من الخائص، أهمها:

template والتي بإمكانك أن تمرر لها كود HTML،
templateUrl التي يمكنك أن تمرر لها رابط صفحة HTML.

مثال:

when("/page3", {
  template : "<h1>Page 3</h1><p>This is the third page</p>"
  // templateUrl: page3.html
});

الآن في كود HTML يجب إضافة حاوية لوضع المحتوى الذي توفره وحدة التوجيه.

هذه الحاوية ng-view.

هناك أكثر من طريقة لتضمين توجيه ng-view في تطبيقك من بينها:

<div ng-view></div>

أو

<ng-view></ng-view>

وهذا مثال كامل:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route/1.7.9/angular-route.min.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-view></div>

    <a href="#/!">Main page</a>
    <a href="#!page1">Page 1</a>
    <a href="#!page2">Page 2</a>
    <a href="#!page3">Page 3</a>

    <script>
      var app = angular.module("myApp", ["ngRoute"]);
      app.config(function ($routeProvider) {
        $routeProvider
          .when("/", {
            template: "<h1>Main page</h1><p>This is the main page</p>",
          })
          .when("/page1", {
            template: "<h1>Page 1</h1><p>This is the first page</p>",
          })
          .when("/page2", {
            template: "<h1>Page 2</h1><p>This is the second page</p>",
          })
          .when("/page3", {
            template: "<h1>Page 3</h1><p>This is the third page</p>",
          });
      });
    </script>
  </body>
</html>

يمكنك تجربة الكود من هنا

محمد المتوكل · 3 يونيو 2020

شكرا جزيلا لوقتك ومشاركتي هذه المعلومات

لكن لو كان ممكنا أن أضيف animation

بين الـ Routs لأن هذا هو سبب طرحي السؤال

وجزاك الله خيرا على المساهمة التي قد تنفع غيري فيما بعد

محمد المتوكل · 5 يونيو 2020

بتاريخ On 6/4/2020 at 08:10 قال محمد ربيع زليول:

لإضافة animation قم بتضمين مكتبة animate:


<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-animate/1.7.9/angular-animate.min.js"></script>

ثم قم بإضافة وحدة ngAnimate للوحدة الرئيسية:


var app = angular.module("myApp", ["ngRoute", "ngAnimate"]);

ثم قم بكتابة Animation عن طريق CSS Animations.

ثم ضعها بملف CSS الخاص بك، مثلا قمت بإنشاء slideInRight و slideOutLeft كالتالي:


@keyframes slideInRight {
    from    { transform:translateX(100%); }
    to      { transform: translateX(0); }
}

@keyframes slideOutLeft {
    to      { transform: translateX(-100%); }
}

الآن تتبقى خطوة واحدة فقط وهي إضافة محددات لصنفي ng-enter و ng-leave.

المحدد الأول يأتي لتعريف Animation عند الإنتقال لل view.
المحدد الثاني لتعريف Animation عند مغادرة View.


.ng-enter{ animation: slideOutLeft 0.5s both ease-in; z-index: 8888; }

.ng-leave{ animation: slideInRight 0.5s both ease-in; z-index: 9999; }

ليصبح الكود الكامل كالتالي:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route/1.7.9/angular-route.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-animate/1.7.9/angular-animate.min.js"></script>

    <style>
      body {
        text-align: center;
      }
      @keyframes slideInRight {
        from {
          transform: translateX(100%);
        }
        to {
          transform: translateX(0);
        }
      }

      @keyframes slideOutLeft {
        to {
          transform: translateX(-100%);
        }
      }

      .ng-enter {
        animation: slideOutLeft 0.5s both ease-in;
        z-index: 8888;
      }
      .ng-leave {
        animation: slideInRight 0.5s both ease-in;
        z-index: 9999;
      }
    </style>
  </head>
  <body ng-app="myApp">
    <div ng-view></div>

    <a href="#/!">Main page</a>
    <a href="#!page1">Page 1</a>
    <a href="#!page2">Page 2</a>
    <a href="#!page3">Page 3</a>

    <script>
      var app = angular.module("myApp", ["ngRoute", "ngAnimate"]);
      app.config(function ($routeProvider) {
        $routeProvider
          .when("/", {
            template: "<h1>Main page</h1><p>This is the main page</p>",
          })
          .when("/page1", {
            template: "<h1>Page 1</h1><p>This is the first page</p>",
          })
          .when("/page2", {
            template: "<h1>Page 2</h1><p>This is the second page</p>",
          })
          .when("/page3", {
            template: "<h1>Page 3</h1><p>This is the third page</p>",
          });
      });
    </script>
  </body>
</html>

عدلت الملف السابق وأضفت له Animation يمكنك الإطلاع عليه من هنا.

وهذا مشروع يحتوي على بعض التفاصيل إن أحببت الإطلاع عليه من هنا.

جزاك الله خيرا أخي محمد على تعاونك و جعل هذا في ميزان حسناتك ووفقت للخير إن شاء الله

الإنتقال بين views مع animation في angular js

السؤال

محمد المتوكل

6 أجوبة على هذا السؤال

Recommended Posts

محمد ربيع زليول

Nezar Madi

محمد المتوكل

محمد ربيع زليول

محمد المتوكل

محمد المتوكل

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية