Sometimes you need to do something after the component has updated. For example, you may need to measure the component after the update, in order to perform an imperative action like an animation. There's a callback for that, and unsurprisingly it's called updated().

The component on the right displays a message when you click the button. It's not very exciting, though. It could use some kind of transition.

Add the following updated() method to the component:

  protected updated(changedProperties: PropertyValues<this>): void {
    if (changedProperties.has('_showMessage')) {
      const final = this._message.getBoundingClientRect().width;
      const starting = 0 - final;
      var player = this._message.animate([
        { transform: `translateX(${starting}px)` },
        { transform: `translateX(0)` }
      ], {
        duration: 500,
        easing: 'ease-out',
      });
    }
  }

  updated(changedProperties) {
    if (changedProperties.has('_showMessage')) {
      const final = this._message.getBoundingClientRect().width;
      const starting = 0 - final;
      this._message.animate([
        { transform: `translateX(${starting}px)` },
        { transform: `translateX(0)` }
      ], {
        duration: 500,
        easing: 'ease-out',
      });
    }
  }

This isn't the simplest way to implement this particular animation, but it demonstrates measuring the DOM after an update, a crucial task for many animations.

Adding animation?

You can add simple animations using CSS. For more complex animations, the @lit-labs/motion package can help. For sample code, see motion samples in the Playground.

The updated() callback is different from the other update cycle callback in that reactive property updates that occur during updated() will trigger a new update.