title: Opacity animation does not work in Angular, why?
body: <p><strong>Scenario:</strong> I'm trying to animate an error message when there is a problem with the connection to the server; I've succeeded in animating a part of it, which makes the text move upon resizing the window.</p>
  <p>Now, when the connection is back in place, I want to make the error message to change and then make it disappear after about a second (animate the opacity from 100% to 0%).</p>
  <p>Everything works except the opacity part... Ideally I'd like the text element to disappear from the DOM as well, but as of now even the opacity animation doesn't work...</p>
  <p>Does anybody know what I'm doing wrong?</p>
  <p>Thank you!</p>
  <p><strong>TypeScript Code:</strong></p>
  <pre><code>animations: [
      trigger(&quot;changeWindowSize&quot;, [
        state(
          &quot;open&quot;,
          style({
            top: &quot;11px&quot;
          })
        ),
        state(
          &quot;close&quot;,
          style({
            top: &quot;76px&quot;
          })
        ),
  
        transition(&quot;open=&gt;close&quot;, animate(&quot;200ms ease-in&quot;)),
        transition(&quot;close=&gt;open&quot;, animate(&quot;200ms cubic-bezier(0.35, 0, 0.25, 1)&quot;))
  
      ]),
      trigger(&quot;changeOpacity&quot;, [
        state(
          &quot;opacity-1&quot;,
          style({
            opacity: &quot;1&quot;
          })
        ),
        state(
          &quot;opacity-0&quot;,
          style({
            opacity: &quot;0&quot;
          })
        ),
        transition(&quot;opacity-1=&gt;opacity-0&quot;, animate(&quot;200ms 1000ms ease-in&quot;)),
        transition(&quot;opacity-0=&gt;opacity-1&quot;, animate(&quot;200ms 1000ms cubic-bezier(0.35, 0, 0.25, 1)&quot;))
      ])
    ]
  </code></pre>
  <p><strong>HTML Code:</strong></p>
  <pre><code>&lt;mat-toolbar id=&quot;com-err&quot; *ngIf=&quot;wsService.getConnectionError()&quot; (window:resize)=&quot;onResize($event)&quot;
               [@changeWindowSize]=&quot;windowWidthCurrent &gt; 1240 ? 'open': 'close'&quot;&gt;
    &lt;mat-icon
      [ngStyle]=&quot;{'color': 'red', 'margin-left': '10px', 'margin-right': '10px', 'transform': 'scale(1.2)'}&quot;&gt;
      warning
    &lt;/mat-icon&gt;&lt;div&gt;No Connection&lt;/div&gt;
  &lt;/mat-toolbar&gt;
  
  &lt;mat-toolbar id=&quot;com-err&quot; *ngIf=&quot;!wsService.getConnectionError()&quot; (window:resize)=&quot;onResize($event)&quot;
               [@changeWindowSize]=&quot;windowWidthCurrent &gt; 1190 ? 'open': 'close'&quot;
               [@changeOpacity]=&quot;'opacity-1'&quot;&gt;
    &lt;mat-icon
      [ngStyle]=&quot;{'color': 'green', 'margin-left': '10px', 'margin-right': '10px', 'transform': 'scale(1.2)'}&quot;&gt;
      warning
    &lt;/mat-icon&gt;&lt;div&gt;Connection Reestablished&lt;/div&gt;
  &lt;/mat-toolbar&gt;
  </code></pre>