اذهب إلى المحتوى
  • 0

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

محمد المتوكل

السؤال

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

لإضافة 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 يمكنك الإطلاع عليه من هنا.

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

تم التعديل في بواسطة محمد ربيع زليول
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

أهلا محمد..

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

أهلا محمد..

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

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

أشكر تعاونك,

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

لعمل 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>

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
 
 
 
 
بتاريخ 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 يمكنك الإطلاع عليه من هنا.

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...