CSS Transition not working when using from style.scss

[narendrasinghrathore]

Reproduction

Use StackBlitz to reproduce your issue:

• Components: https://stackblitz.com/edit/angular-transistion-issue?file=package.json

Steps to reproduce:

1. Create two class with different name with same transition property
2. Add one in style.scss and other one in your-component.scss
3. Transition property work as expected when used from your component, but not working from style.scss

Expected Behavior

What behavior were you expecting to see?
Should have similar behavior.

Actual Behavior

What behavior did you actually see?
Transition not working whereas media queries are working when using from style.scss.
Either nothing works or all works.

Environment

 "@angular/animations": "^10.0.9",
    "@angular/cdk": "11.0.3",
    "@angular/common": "^10.0.9",
    "@angular/compiler": "^10.0.9",
    "@angular/core": "^10.0.9",
    "@angular/forms": "^10.0.9",
    "@angular/material": "^11.0.3",
    "@angular/platform-browser": "^10.0.9",
    "@angular/platform-browser-dynamic": "^10.0.9",
    "@angular/router": "^10.0.9",
    "rxjs": "^6.6.2",
    "tslib": "^2.0.1",
    "zone.js": "^0.10.3"

• Browser(s): Chrome
• Operating System - Windows, Generic

[crisbeto]

By default Angular encapsulates your styles so that styles from the outside don't leak in. You can set encapsulation: ViewEncapsulation.None on a component if you want to disable it.

[narendrasinghrathore]

Okay, but how then media queries are working but not only transition ?
@crisbeto

[narendrasinghrathore]

Okay, but how then media queries are working but not only transition ?
@crisbeto

@crisbeto Any help ?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}