Is there a way to perform svelte transition without a if block?

Question

  <button on:click={() => (visible = !visible)}>Toggle</button>

  {#if !visible}
    <QuizArea
      transition:slide
      on:score={e => {
        playerScore = e.detail.score;
      }} />
  {/if}

My question is can I use the transition without toggling the visibility?

Intestinal

By default transitions are triggered by an element entering or leaving the DOM as a result of a state change. What are you trying to achieve? If you want the transition to run when you create the component you can set intro to true. – Chenopod

Answer 1

Using a {#key} block:

<script>
import { fly } from "svelte/transition"
let unique = {}

function restart() {
  unique = {} // every {} is unique, {} === {} evaluates to false
}
</script>

{#key unique}
  <h1 in:fly={{x: 100}}>Hello world!</h1>
{/key}

<button on:click={restart}>Restart</button>

REPL

{#key} was introduced in Svelte v3.28, before that you needed to use a keyed {#each} block with only one item

When the key changes, svelte removes the component and adds a new one, therefor triggering the transition.

Using { create_in_transition } from "svelte/internal"

<script>
    import { fly } from "svelte/transition"
    import { create_in_transition } from "svelte/internal"
    
    let element;
    let intro
    
    function animate() {
        if (!intro) {
            intro = create_in_transition(element, fly, {x: 100});   
        }   
        intro.start();

    }
</script>

<h1 bind:this={element}>Hello world!</h1>
<button on:click={animate}>Go</button>

REPL

Has a similar effect, but instead of removing the previous component and creating a new one, this method re-uses the same instance.

But using internal api's is dangerous as these may change when you update svelte.
If you decide to use this, add a line to your project Readme.md mentioning which internal api's you used and why.
Try to write it using other methods when you can.

Chromaticity

Is there any advantage or difference between using {#if value} {value} {/if} and {#key value} {value} {/key} for transitions or anything else? – Deeannadeeanne

The transition doesn't activate with #if when the value didn't change from a truthy to a falsy value, it depends on what you need. – Chromaticity

Answer 2

the transition directive or intro/outro is for transition when your component is created and added into the DOM, or destroyed and removed from the DOM.

The only way to add/remove a component with Svelte is to use logic blocks like {#if} to add/remove a component based on a logic.

If you want to keep the component on the DOM, but still add animation, like fading the component in and out, you can consider using CSS transition or CSS animation by adding/removing CSS class, something like this.

Splasher

In addition, if the OP wanted to animate the component (instead of transitioning it), one could consider to use motion – Tit

@Tan Li Hau, do you think it is good to keep the component on DOM or add/remove to/from DOM when needed? In my case, I am asking It for a pop-up filter and it will be used to filter items on the items-list page. But this filter is big and have 100-150 lines of HTML. – Deeannadeeanne

@Deeannadeeanne if by default the pop-up filter is not showing, and it's not showing most of the time, then it can be created only when it's needed. – Splasher

@TanLiHau, Thank you for sharing your opinion. :) – Deeannadeeanne

Answer 3

The way I did it was to set a variable ready to false and then set it to true within onMount, this way is using an if statement to trigger the change when the element is rendered, but if what you want to do is have your element animated when the page is loaded then this works perfectly.

<script>
    import { onMount } from 'svelte';
    import { fade } from 'svelte/transition';
    let ready = false;
    onMount(() => {
        loaded = true;
    });
</script>

{#if loaded}
    <h1 transition:fade>Some text</h1>
{/if}

Mitrewort