pp-visibility

The pp-visibility attribute is used to control the visibility of an element in the user interface by specifying a duration in milliseconds. It allows you to hide and show an element after a certain period, making it useful for displaying notification messages, loading indicators, or temporarily hiding elements while maintaining the space they occupy.

Use Cases

Visibility: Use when you need the element to be hidden but still want to reserve its space in the layout. For example, temporarily hiding an element without causing layout shifts.

Syntax

pp-visibility="duration": Hides the element after the specified duration. The duration can be specified in milliseconds (ms), seconds (s), or minutes (m). If no unit is provided, it will be considered as milliseconds by default.
pp-visibility="{'end': 'duration'}": Hides the element after the specified duration. The duration can be specified in milliseconds (ms), seconds (s), or minutes (m). If no unit is provided, it will be considered as milliseconds by default.
pp-visibility="{'start': 'duration'}": Hides the element and shown after the specified duration. The duration can be specified in milliseconds (ms), seconds (s), or minutes (m). If no unit is provided, it will be considered as milliseconds by default.
pp-visibility="{'start': 'duration', 'end': 'duration'}": Hides the element and shown after the start duration and hides it after the end duration. The durations can be specified in milliseconds (ms), seconds (s), or minutes (m). If no unit is provided, it will be considered as milliseconds by default.

Note: The pp-visibility="duration" and pp-visibility="{'end': 'duration'}" attributes both hide the element after the specified duration. They work in the same way and are just different syntax options for achieving the same functionality.

Example Usage

<div pp-visibility="3000">This element will be hidden after 3000 mili seconds</div>
  <div pp-visibility="5000ms">This element will be hidden after 5000 mili seconds</div>
  <div pp-visibility="10s">This element will be hidden after 10 seconds</div>
  <div pp-visibility="1m">This element will be hidden after 1 minute</div>
  <hr>
  <div pp-visibility="{'end': '3000'}">This element will be hidden after 3000 mili seconds</div>
  <div pp-visibility="{'end': '5000ms'}">This element will be hidden after 5000 mili seconds</div>
  <div pp-visibility="{'end': '10s'}">This element will be hidden after 10 seconds</div>
  <div pp-visibility="{'end': '1m'}">This element will be hidden after 1 minute</div>
  <hr>
  <div pp-visibility="{'start': '3000'}">This element will be hidden and shown after 3000 mili seconds</div>
  <div pp-visibility="{'start': '5000ms'}">This element will be hidden and shown after 5000 mili seconds</div>
  <div pp-visibility="{'start': '10s'}">This element will be hidden and shown after 10 seconds</div>
  <div pp-visibility="{'start': '1m'}">This element will be hidden and shown after 1 minute</div>
  <hr>
  <div pp-visibility="{'start': '3000', 'end': '5000'}">This element will be hidden and shown after 3000 mili seconds and hidden after 5000 mili seconds</div>
  <div pp-visibility="{'start': '5000ms', 'end': '10s'}">This element will be hidden and shown after 5000 mili seconds and hidden after 10 seconds</div>
  <div pp-visibility="{'start': '10s', 'end': '1m'}">This element will be hidden and shown after 10 seconds and hidden after 1 minute</div>
  <div pp-visibility="{'start': '1m', 'end': '2m'}">This element will be hidden and shown after 1 minute and hidden after 2 minutes</div>