Wie füge ich mit Angularjs Routing einen Fading-Effekt zwischen zwei Seiten hinzu?

Ich möchte meiner eckigen Webseite, die Routing verwendet, eine Animation hinzufügen. Ich suche nach einem Ein-/Ausblendeffekt, genau wie wenn Sie auf dieser Seite auf Weiter klicken: https://app.enhancv.com/. Wenn ich also auf einen Listeneintrag im Header klicke, schwebt eine andere Seite mit demselben Effekt ein. Wie kann ich das mit Winkelrouting machen? Sie können die erforderlichen Dateien unten finden.Wie füge ich mit Angularjs Routing einen Fading-Effekt zwischen zwei Seiten hinzu?

Index.HTML

<!DOCTYPE html> 

<!-- define angular app --> 
<html ng-app="myApp"> 

<head> 
    <!-- SCROLLS --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> 

    <!-- SPELLS --> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
    <script src="script.js"></script> 
</head> 

<!-- define angular controller --> 
<body ng-controller="mainController"> 

    <nav class="navbar navbar-default"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <a class="navbar-brand" href="/">Angular Routing Example</a> 
     </div> 

     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><i class="fa fa-home"></i> Home</a></li> 
     <li><a href="#about"><i class="fa fa-shield"></i> About</a></li> 
     <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a> 

</li> 
      </ul> 
     </div> 

    </nav> 

<div id="main"> 

    <!-- angular templating --> 
     <!-- this is where content will be injected --> 
    <div ng-view></div> 

    </div> 

</body> 

</html>

Seiten sind:

about.html

<div class="jumbotron text-center"> 
     <h1>About Page</h1> 

     <p>{{ message }}</p> 
    `</div>

contact.html

<div class="jumbotron text-center"> 
    <h1>Contact Page</h1> 

    <p>{{ message }}</p> 
    </div>

home.html

<div class="jumbotron text-center"> 
    <h1>Contact Page</h1> 

    <p>{{ message }}</p> 
    </div>

script.js

// create the module and name it myApp 
    var myApp = angular.module('myApp', ['ngRoute']); 

    // configure our routes 
    scotchApp.config(function($routeProvider) { 
     $routeProvider 

      // route for the home page 
      .when('/', { 
       templateUrl : 'pages/home.html', 
       controller : 'mainController' 
      }) 

      // route for the about page 
      .when('/about', { 
       templateUrl : 'pages/about.html', 
       controller : 'aboutController' 
      }) 

      // route for the contact page 
      .when('/contact', { 
       templateUrl : 'pages/contact.html', 
       controller : 'contactController' 
      }); 
    }); 

    // create the controller and inject Angular's $scope 
    myApp.controller('mainController', function($scope) { 
     // create a message to display in our view 
     $scope.message = 'Everyone come and see how good I look!'; 
    }); 

    myApp.controller('aboutController', function($scope) { 
     $scope.message = 'Look! I am an about page.'; 
    }); 

    myApp.controller('contactController', function($scope) { 
     $scope.message = 'Contact us! JK. This is just a demo.'; 
    });

Quelle

2017-02-09 V.Spock

Sie werden das 'ngAnimate'-Modul benötigen. Ich bin mir sicher, wenn Sie eine schnelle Google-Suche nach "ngAnimate Beispielen" machen, können Sie sich von einer Vielzahl von Quellen inspirieren lassen. –

ich meine Inhalte in einem Behälter wickeln, die nur angezeigt wird, wenn die Daten geladen:

<div ng-show="yourpage.dataLoaded" class="fade-element"> 
... 
</div>

CSS

.fade-element{ 
    transition: all linear 0.1s; 
    opacity: 1; 
} 
.fade-element.ng-hide { 
    opacity: 0; 
}

.fade-element.ng-hide kann in einem verwendet werden n Element, das ausgeblendet wird, z. B. ein Preloader:

<div ng-hide="yourpage.dataLoaded" class="preloader fade-element"></div>

Quelle

2017-02-09 22:14:58 gianni

Wie füge ich mit Angularjs Routing einen Fading-Effekt zwischen zwei Seiten hinzu?

Antwort

Verwandte Themen