Tero Parviainen 4acbef19a8 docs(upgrade): add ngUpgrade guide version 2
closes #1538
This is a major reorganization of the Upgrade guide.

* Compatible with the new version of the AngularJS 1 PhoneCat
  tutorial.
* No longer switching Angular 1 code to SystemJS for PhoneCat,
  to allow beginning Angular 2 migration with fewer preparation
  steps. SystemJS switch now happens simultaneously with upgrade.
  (This is based on input from @joeeames)
* Testing moved to an appendix to make the main narrative
  shorter and easier to follow.
* Use component methods to do phone filtering and ordering
  instead of introducing pipes to replace filterFilter and orderByFilter.
* Cover issue with camelCase inputs on downgraded components.

For authors:

* All examples now fully integrated with the example boilerplate. Uses the
  same Angular 2 version as all other guides. E2E tests are executed
  along with all the others.
* Reduced number of PhoneCat versions from five to three.
* Each directory has a README explaining how to run it and what might
  be peculiar about it.

Closes angular/angular#8622
Relates to angular/angular.js#14416
Relates to angular/angular-phonecat#326
2016-05-28 09:33:06 -07:00

68 lines
1.2 KiB
CSS

/* Animate `ngRepeat` in `phoneList` component */
.phone-list-item.ng-enter,
.phone-list-item.ng-leave,
.phone-list-item.ng-move {
overflow: hidden;
transition: 0.5s linear all;
}
.phone-list-item.ng-enter,
.phone-list-item.ng-leave.ng-leave-active,
.phone-list-item.ng-move {
height: 0;
margin-bottom: 0;
opacity: 0;
padding-bottom: 0;
padding-top: 0;
}
.phone-list-item.ng-enter.ng-enter-active,
.phone-list-item.ng-leave,
.phone-list-item.ng-move.ng-move-active {
height: 120px;
margin-bottom: 20px;
opacity: 1;
padding-bottom: 4px;
padding-top: 15px;
}
/* Animate view transitions with `ngView` */
.view-container {
position: relative;
}
.view-frame {
margin-top: 20px;
}
.view-frame.ng-enter,
.view-frame.ng-leave {
background: white;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.view-frame.ng-enter {
animation: 1s fade-in;
z-index: 100;
}
.view-frame.ng-leave {
animation: 1s fade-out;
z-index: 99;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
/* Older browsers might need vendor-prefixes for keyframes and animation! */