collapse.css 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /**
  2. * angular-motion
  3. * @version v0.4.2 - 2015-09-23
  4. * @link https://github.com/mgcrea/angular-motion
  5. * @author Olivier Louvignes <olivier@mg-crea.com> (https://github.com/mgcrea)
  6. * @license MIT License, http://www.opensource.org/licenses/MIT
  7. */
  8. .am-collapse {
  9. -webkit-animation-duration: 0.3s;
  10. animation-duration: 0.3s;
  11. -webkit-animation-timing-function: ease;
  12. animation-timing-function: ease;
  13. -webkit-animation-fill-mode: backwards;
  14. animation-fill-mode: backwards;
  15. overflow: hidden;
  16. opacity: 1;
  17. }
  18. .am-collapse.am-collapse-add,
  19. .am-collapse.ng-hide-remove,
  20. .am-collapse.ng-move {
  21. -webkit-animation-name: expand;
  22. animation-name: expand;
  23. }
  24. .am-collapse.am-collapse-remove,
  25. .am-collapse.ng-hide {
  26. -webkit-animation-name: collapse;
  27. animation-name: collapse;
  28. }
  29. .am-collapse.ng-enter {
  30. visibility: hidden;
  31. -webkit-animation-name: expand;
  32. animation-name: expand;
  33. -webkit-animation-play-state: paused;
  34. animation-play-state: paused;
  35. }
  36. .am-collapse.ng-enter.ng-enter-active {
  37. visibility: visible;
  38. -webkit-animation-play-state: running;
  39. animation-play-state: running;
  40. }
  41. .am-collapse.ng-leave {
  42. -webkit-animation-name: collapse;
  43. animation-name: collapse;
  44. -webkit-animation-play-state: paused;
  45. animation-play-state: paused;
  46. }
  47. .am-collapse.ng-leave.ng-leave-active {
  48. -webkit-animation-play-state: running;
  49. animation-play-state: running;
  50. }
  51. @-webkit-keyframes expand {
  52. from {
  53. max-height: 0px;
  54. }
  55. to {
  56. max-height: 500px;
  57. }
  58. }
  59. @keyframes expand {
  60. from {
  61. max-height: 0px;
  62. }
  63. to {
  64. max-height: 500px;
  65. }
  66. }
  67. @-webkit-keyframes collapse {
  68. from {
  69. max-height: 500px;
  70. }
  71. to {
  72. max-height: 0px;
  73. }
  74. }
  75. @keyframes collapse {
  76. from {
  77. max-height: 500px;
  78. }
  79. to {
  80. max-height: 0px;
  81. }
  82. }
  83. .panel-collapse.am-collapse.in-remove {
  84. -webkit-animation-name: collapse;
  85. animation-name: collapse;
  86. display: block;
  87. }
  88. .panel-collapse.am-collapse.in-add {
  89. -webkit-animation-name: expand;
  90. animation-name: expand;
  91. }