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)
     ])
     ])
  ]

Barremian · Accepted Answer · 2020-03-20 12:05:45Z

1

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

answered Mar 20, 2020 at 12:05

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CodeWarrior · Accepted Answer · 2020-03-20 12:11:27Z

0

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)
     ])
     ])
  ]

answered Mar 20, 2020 at 12:11

CodeWarrior

5,2066 gold badges34 silver badges49 bronze badges

Collectives™ on Stack Overflow

angular animation :enter overflow text on button slidein

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related