szit

Felhasználói eszközök

Eszközök a webhelyen

Itt vagy: start » oktatas » web » angularjs » angularjs_animacio
Nyomvonal:
oktatas:web:angularjs:angularjs_animacio

Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

Összehasonlító nézet linkje

oktatas:web:angularjs:angularjs_animacio [2019/08/22 20:27] – létrehozva adminoktatas:web:angularjs:angularjs_animacio [2021/03/25 22:23] (aktuális) – [Egy] admin
Sor 4: Sor 4:
 ===== Egy ===== ===== Egy =====
  
-<code html>+<code html index.html>
 <!DOCTYPE html> <!DOCTYPE html>
 <html ng-app="myApp"> <html ng-app="myApp">
 <head> <head>
 <title>AngularJS ngHide példa</title> <title>AngularJS ngHide példa</title>
-<link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.2.0/css/ +
-bootstrap.css" rel="stylesheet" />+
 <style> <style>
 /* ngHide animation */ /* ngHide animation */
-.ngHideSample {+.doboz {
     padding: 10px;     padding: 10px;
 +    background-color: orange;
 } }
-.ngHideSample.ng-hide-add { +.doboz.ng-hide-add { 
-    transition: all linear 0.3s;+    transition: all linear 0.8s;
     opacity: 1;     opacity: 1;
 } }
-.ngHideSample.ng-hide-add-active {+.doboz.ng-hide-add-active {
     opacity: 0;     opacity: 0;
 } }
-.ngHideSample.ng-hide-remove { +.doboz.ng-hide-remove { 
-    transition: all linear 0.3s;+    transition: all linear 0.8s;
     opacity: 0;     opacity: 0;
 } }
-.ngHideSample.ng-hide-remove-active {+.doboz.ng-hide-remove-active {
     opacity: 1;     opacity: 1;
 } }
 </style> </style>
 + 
 </head> </head>
 <body> <body>
 + 
 <h1>ngHide animáció</h1> <h1>ngHide animáció</h1>
 + 
 <button ng-click="disabled = !disabled"> <button ng-click="disabled = !disabled">
-Toggle ngHide animáció+Mehet
 </button> </button>
- +  
-<div ng-hide="disabled" class="ngHideSample bg-success">+<div ng-hide="disabled" class="doboz">
 Ennek az elemnek van ng-hide direktívája. Ennek az elemnek van ng-hide direktívája.
 </div> </div>
- +  
-<script src="//ajax.googleapis.com/ajax/libs/angularjs +<script src="https://code.angularjs.org/1.8.2/angular.js"></script> 
-/1.3.0/angular.min.js"></script> +<script src="https://code.angularjs.org/1.8.2/angular-animate.js"></script>
-<script src="//ajax.googleapis.com/ajax/libs/angularjs +
-/1.3.0/angular-animate.min.js"></script>+
 <script> <script>
 var app = angular.module('myApp', ['ngAnimate']); var app = angular.module('myApp', ['ngAnimate']);
 </script> </script>
 + 
 </body> </body>
-</html>    +</html>
 </code> </code>
  
oktatas/web/angularjs/angularjs_animacio.1566498466.txt.gz · Utolsó módosítás: 2019/08/22 20:27 szerkesztette: admin