Animate hidden property on UILabels in UIStackView causes different animations

Question

UIStackView makes it really easy to create a nice animation using the hidden property of a UIView. I have two UIStackViews each with UILabels in the arrangedSubviews and when I add a new UILabel to a UIStackView, it should present it with an animation of the label appearing at the correct index, pushing the labels above and below it.

This effect is very easy to do using UIStackViews:

descriptionLabel.hidden = true 

let count = descriptionStack.arrangedSubviews.count
descriptionStack.insertArrangedSubview(expenseLabel.descriptionLabel, atIndex: count - 1)

UIView.animateWithDuration(0.5) {
  descriptionLabel.hidden = false
}

I want to do this effect simultaneously for two different UIStackViews, but this causes some weird behaviour, where one is animated correctly while the other drops in from the top of the view. Assuming that the above code can be repeated for some other view and create the same animation:

descriptionLabel.hidden = true 
costLabel.hidden = true

let count = descriptionStack.arrangedSubviews.count
descriptionStack.insertArrangedSubview(expenseLabel.descriptionLabel, atIndex: count - 1)
costStack.insertArrangedSubview(expenseLabel.costLabel, atIndex: count - 1)

UIView.animateWithDuration(0.5) {
  descriptionLabel.hidden = false
  UIView.animateWithDuration(0.5) {
    costLabel.hidden = false
  }
}

In this example, the costLabel is animated correctly, while descriptionLabel drops in from the top of the UIStackView. Reversing the order causes the costLabel to drop in and descriptionLabel to animate correctly.

I've tried variations of this animation code e.g. not nesting the animations and using UIView.animateKeyframesWithDuration.

Doing it as below, causes the costLabel to drop in and the descriptionLabel to animate correctly:

UIView.animateWithDuration(0.5) {
  descriptionLabel.hidden = false
}

UIView.animateWithDuration(0.5) {
  costLabel.hidden = false
}

I cannot figure out why the animations are always different from each other. How do I animate both labels simultaneously and having the effect where they appear at the correct index, pushing the labels above and below?

Supplement

Answer 1

I have exactly the same problem. I found out that setting the Content Mode property of the UILabel seems to change the way the UIView animation is performed. In my case I wanted to achieve an animation from top to bottom. The default animation was a slide in from left combined with a resize. Setting Content Mode to Top worked for me.

Maybe that helps.

Sherrilsherrill

Changing the Content Mode definitely has an effect on how the UILabel is animated, but it doesn't seem very consistent. Setting it to .Left makes the label "drop down" but setting it to .Right makes it appear from the left side of the view. It does at least look better appearing from the side, thanks! – Supplement