Front end of the Slack clone application.

toast-transitions.js 6.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. import { Animation } from '../../animations/animation';
  2. import { Transition } from '../../transitions/transition';
  3. export class ToastSlideIn extends Transition {
  4. init() {
  5. // DOM READS
  6. let ele = this.enteringView.pageRef().nativeElement;
  7. const wrapperEle = ele.querySelector('.toast-wrapper');
  8. let wrapper = new Animation(this.plt, wrapperEle);
  9. if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_TOP) {
  10. // top
  11. // by default, it is -100% hidden (above the screen)
  12. // so move from that to 10px below top: 0px;
  13. wrapper.fromTo('translateY', '-100%', `${10}px`);
  14. }
  15. else if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_MIDDLE) {
  16. // Middle
  17. // just center it and fade it in
  18. let topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
  19. // DOM WRITE
  20. wrapperEle.style.top = `${topPosition}px`;
  21. wrapper.fromTo('opacity', 0.01, 1);
  22. }
  23. else {
  24. // bottom
  25. // by default, it is 100% hidden (below the screen),
  26. // so move from that to 10 px above bottom: 0px
  27. wrapper.fromTo('translateY', '100%', `${0 - 10}px`);
  28. }
  29. this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(wrapper);
  30. }
  31. }
  32. export class ToastSlideOut extends Transition {
  33. init() {
  34. let ele = this.leavingView.pageRef().nativeElement;
  35. const wrapperEle = ele.querySelector('.toast-wrapper');
  36. let wrapper = new Animation(this.plt, wrapperEle);
  37. if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_TOP) {
  38. // top
  39. // reverse arguments from enter transition
  40. wrapper.fromTo('translateY', `${10}px`, '-100%');
  41. }
  42. else if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_MIDDLE) {
  43. // Middle
  44. // just fade it out
  45. wrapper.fromTo('opacity', 0.99, 0);
  46. }
  47. else {
  48. // bottom
  49. // reverse arguments from enter transition
  50. wrapper.fromTo('translateY', `${0 - 10}px`, '100%');
  51. }
  52. this.easing('cubic-bezier(.36,.66,.04,1)').duration(300).add(wrapper);
  53. }
  54. }
  55. export class ToastMdSlideIn extends Transition {
  56. init() {
  57. // DOM reads
  58. let ele = this.enteringView.pageRef().nativeElement;
  59. const wrapperEle = ele.querySelector('.toast-wrapper');
  60. let wrapper = new Animation(this.plt, wrapperEle);
  61. if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_TOP) {
  62. // top
  63. // by default, it is -100% hidden (above the screen)
  64. // so move from that to top: 0px;
  65. wrapper.fromTo('translateY', '-100%', `0%`);
  66. }
  67. else if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_MIDDLE) {
  68. // Middle
  69. // just center it and fade it in
  70. let topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
  71. // DOM WRITE
  72. wrapperEle.style.top = `${topPosition}px`;
  73. wrapper.fromTo('opacity', 0.01, 1);
  74. }
  75. else {
  76. // bottom
  77. // by default, it is 100% hidden (below the screen),
  78. // so move from that to bottom: 0px
  79. wrapper.fromTo('translateY', '100%', `0%`);
  80. }
  81. this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(wrapper);
  82. }
  83. }
  84. export class ToastMdSlideOut extends Transition {
  85. init() {
  86. let ele = this.leavingView.pageRef().nativeElement;
  87. const wrapperEle = ele.querySelector('.toast-wrapper');
  88. let wrapper = new Animation(this.plt, wrapperEle);
  89. if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_TOP) {
  90. // top
  91. // reverse arguments from enter transition
  92. wrapper.fromTo('translateY', `${0}%`, '-100%');
  93. }
  94. else if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_MIDDLE) {
  95. // Middle
  96. // just fade it out
  97. wrapper.fromTo('opacity', 0.99, 0);
  98. }
  99. else {
  100. // bottom
  101. // reverse arguments from enter transition
  102. wrapper.fromTo('translateY', `${0}%`, '100%');
  103. }
  104. this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(wrapper);
  105. }
  106. }
  107. export class ToastWpPopIn extends Transition {
  108. init() {
  109. let ele = this.enteringView.pageRef().nativeElement;
  110. const wrapperEle = ele.querySelector('.toast-wrapper');
  111. let wrapper = new Animation(this.plt, wrapperEle);
  112. if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_TOP) {
  113. // top
  114. wrapper.fromTo('opacity', 0.01, 1);
  115. wrapper.fromTo('scale', 1.3, 1);
  116. }
  117. else if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_MIDDLE) {
  118. // Middle
  119. // just center it and fade it in
  120. let topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
  121. // DOM WRITE
  122. wrapperEle.style.top = `${topPosition}px`;
  123. wrapper.fromTo('opacity', 0.01, 1);
  124. wrapper.fromTo('scale', 1.3, 1);
  125. }
  126. else {
  127. // bottom
  128. wrapper.fromTo('opacity', 0.01, 1);
  129. wrapper.fromTo('scale', 1.3, 1);
  130. }
  131. this.easing('cubic-bezier(0,0,0.05,1)').duration(200).add(wrapper);
  132. }
  133. }
  134. export class ToastWpPopOut extends Transition {
  135. init() {
  136. // DOM reads
  137. let ele = this.leavingView.pageRef().nativeElement;
  138. const wrapperEle = ele.querySelector('.toast-wrapper');
  139. let wrapper = new Animation(this.plt, wrapperEle);
  140. if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_TOP) {
  141. // top
  142. // reverse arguments from enter transition
  143. wrapper.fromTo('opacity', 0.99, 0);
  144. wrapper.fromTo('scale', 1, 1.3);
  145. }
  146. else if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_MIDDLE) {
  147. // Middle
  148. // just fade it out
  149. wrapper.fromTo('opacity', 0.99, 0);
  150. wrapper.fromTo('scale', 1, 1.3);
  151. }
  152. else {
  153. // bottom
  154. // reverse arguments from enter transition
  155. wrapper.fromTo('opacity', 0.99, 0);
  156. wrapper.fromTo('scale', 1, 1.3);
  157. }
  158. // DOM writes
  159. const EASE = 'ease-out';
  160. const DURATION = 150;
  161. this.easing(EASE).duration(DURATION).add(wrapper);
  162. }
  163. }
  164. const TOAST_POSITION_TOP = 'top';
  165. const TOAST_POSITION_MIDDLE = 'middle';
  166. //# sourceMappingURL=toast-transitions.js.map