---
title: Transition
---

<script>
  import { Transition, Button } from 'slender-ui'
  import { ComponentContainer } from '$lib'

  let key = 0
</script>

Alas, JS only.

<ComponentContainer>
  <Transition {key} to="{{ x: -50, rotate: -180, duration: 400 }}" from="{{ x: 100, scale: 1.5, rotate: 90, delay: 400 }}">
    <Button color="primary" iconLeft="feather.refresh-ccw" label="Transition me!" on:mousedown={ () => key++ } />
  </Transition>

    <div slot="code">

<!-- prettier-ignore -->
```svelte
<script>
  import { Transition, Button } from 'slender-ui'

  let key = 0
</script>

<Transition
  {key}
  to={{ x: -50, rotate: -180, duration: 400 }}
  from={{ x: 100, scale: 1.5, rotate: 90, delay: 400 }}
>
  <Button iconLeft="feather.refresh-ccw" label="Transition me!" on:mousedown={() => key++} />
</Transition>
```

  </div>
</ComponentContainer>