This is considered an experimental feature.

Imba has support for transitioning when elements are added to and removed from the document. If you set an ease attribute on a tag, ie. <my-element ease>, imba makes it possible to easily style the enter-state and exit-state of the element and its children, as well as the timing and easing of this transition.

Imba does not ship with any prebuilt transitions. This might change in a later version, but the idea is that the syntax for styling is powerful enough to easily create your own transitions.

import 'util/styles'

css label d:hflex ja:center us:none
css input mx:1

tag App
	alerted = no
	<self @click=(alerted = !alerted)>
		if alerted
			<div.alert> "Important message"

let app = imba.mount <App.clickable>

In the above example, we attach the <div> to the dom only when alerted is true. In many cases you may want to smoothly transition the element in and out instead of abruptly removing it. To do this in imba, we simply add an ease property to the <div> in question.

# css div p:2 m:2 overflow:hidden min-width:80px
import 'util/styles'
tag App
	alerted = no
	<self @click=(alerted = !alerted)>
		if alerted
			<div.alert[opacity@off:0] ease> "Important message"

let app = imba.mount <App.clickable>

Now that we have declared that this element should ease, we use the @off style modifier to specify the appearance of the element when it is detached from the dom. In this case, we set that the opacity should be set to 0. Imba will transition to/from @off state smoothly, but all easings and durations can be customized. Imba takes care of keeping the element attached to the dom until all transitions have finished.

If you want separate transitions depending on whether the element is being attached or detached, you can use the @in and @out modifiers:

# css div p:2 m:2 overflow:hidden min-width:80px
import 'util/styles'

tag App
	alerted = no
	<self @click=(alerted = !alerted)>
		if alerted
			<div.alert[y@in:100px y@out:-100px] ease> "In from below, out above!"

let app = imba.mount <App.clickable>

Now you can see that it comes in from the left, but leaves to the right. If the element is re-attached while exiting or detached while still entering, the transition will gracefully revert. You can see this by clicking the checkbox rapidly.

You can easily transition nested elements inside the eased element as well.

# css div p:2 m:2 overflow:hidden min-width:80px
import 'util/styles'
tag App
	alerted = no
	<self @click=(alerted = !alerted)>
		if alerted
			<div.alert[o@off:0 y@off:100px ease:1s] ease>
				<div[scale@off:0]> "Important message"

let app = imba.mount <App.clickable>

Click to see the inner div scale during the transition. Also note that we did set the duration of the transition using the ease style property. You can specify the ease duration and timing function for each element, and also specify them individually for transforms, opacity and colors. See properties.