0

I'm trying to set a css style display: none; with angular animations to an element that already has a bootstrap class .d-block, which sets display as .d-block { display: block!important;}. How can I overrule the .d-block class ?

  trigger('fade', [
    state('hidden', style({
      opacity: 0,
      display: 'none'
    })),
    state('show', style({
      opacity: 1,
      display: 'block'
    })),
    transition('hidden => show', [
      animate('1s')
    ]),
    transition('show => hidden', [
      animate('1s')
    ])
Kovago Zoltan
  • 11
  • 3
  • Have a google around `specificity` https://css-tricks.com/specifics-on-css-specificity/ – Dominik Dec 13 '20 at 00:02
  • @Dominik i can't control the specificity of the css rule given by bootstrap, I can only set the class. which means I would have to be more specific with my css within the angular animation, which I don't know/think is possible. – Kovago Zoltan Dec 13 '20 at 00:12
  • Obviously. You can increase the specificity of the overriding rule which is what I tried to suggest. It is possible as all you need is a higher specificity via moving to style attribute, or adding a higher specificity selector or ... 100 more things – Dominik Dec 13 '20 at 00:14
  • @Dominik i get what you we're suggesting, but my question is how can i do that, add higher specificity, with a css rule that is applied via angular animations ? – Kovago Zoltan Dec 13 '20 at 00:23
  • https://stackoverflow.com/questions/11178673/how-to-override-important – Rajat Dec 13 '20 at 01:38
  • @Rajat thank you, but that doesn't answer my question if it's possible or not to give higher specificity to the css rule within angular animations. `display: 'none !important'` is not valid. – Kovago Zoltan Dec 13 '20 at 12:54

1 Answers1

0

I have not found a way to add higher specificity within the angular animations css rule, so for the time being I removed .d-block and added display: block in my css file.

This way the normal css rule is overruled by the angular animations rule.

Kovago Zoltan
  • 11
  • 3