angular animation :enter overflow text on button slidein

Question

Text will start animating over button i want it should not be on top of button. I have added overflow:hidden but it is not working as it should.

demo: https://stackblitz.com/edit/angular-wetmep?file=src%2Fapp%2Fapp.component.html

  animations: [
     trigger('onOff', [
       transition(':enter', [style({
         opacity: 0,
         transform: 'translateY(-100%)'
       }),
       animate(400)
     ])
     ])
  ]

score 1 · Accepted Answer · answered Mar 20 '20 at 12:05

You could use z-index CSS property to arrange elements in layers.

From docs:

Overlapping elements with a larger z-index cover those with a smaller one.

One thing to note is z-index works only on a positioned element. So setting position and z-index properties as following should do it.

.btn-style {
  width:300px;
  height:40px;
  color:#fff;
  background-color:slateblue;
  position: absolute;
  z-index: 2;
}

.text-style {
  font-size:20px;
  font-weight: 500;
  padding:20px 0px 20px;
  position: relative;
  top: 40px;  /* button height */
  z-index: 1;
}

I've modified your Stackblitz

score 0 · Answer 2 · answered Mar 20 '20 at 12:11

Just change your animation to this and you'll get the desired result:

animations: [
     trigger('onOff', [
       transition(':enter', [style({
         opacity: 0,
         transform: 'translateY(-50%)'
       }),
       animate(300)
     ])
     ])
  ]

angular animation :enter overflow text on button slidein

2 Answers2