Svelte series – animation

Animation is an important visual element in interactive design, if the page lacks animation, all changes are flash or flash back, will appear yan but become blunt boring, less a lot of vitality.

The interactive animations on the page are mainly some of the linear transition effects, in the operation and operation between the transition to avoid the abrupt, abrupt.

Interactive animation in Svelte can be divided into three categories: Motion, Transition, and animate.

You can view all the actions supported by an Svelte in the corresponding package of the Svelte

motion

Tweened animation

Tweened is most commonly used for values that change frequently

import { tweened } from 'svelte/motion';
const $progress = tweened(0); Tweened (0) returns a store value
Copy the code

<script>
  import { tweened } from 'svelte/motion';
  // Progressive execution supported by Svelte --> https://unpkg.com/[email protected]/easing/index.mjs
  import { cubicOut } from 'svelte/easing';
  
  // We can give tweened method a configuration item with the second parameter as tween animation
  const progress = tweened(0, {
    delay: 300.Ms / / unit
    duration: 400.// the execution time unit is 300 to 400ms
    easing: cubicOut // Execute the effect incrementally
  });
</script>
Copy the code

Spring Animation

<script>
  import { spring } from 'svelte/motion';

  let $size = spring(10); // Spring returns a store as well
  
  // Spring has a second parameter that configures the spring animation. If not, the default value is used
  let coords = spring({ x: 50.y: 50 }, {
    stiffness: 0.1.// The smaller the value of stiffness [0, 1], the more difficult it is to move
    damping: 0.25 // The smaller the damping coefficient [0, 1], the more obvious the spring effect
  });
</script>
Copy the code

transition

The transition directive is used to describe how gracefully an element enters or leaves the stage

The transition effect is reversible, and if the check box is switched during the transition effect, it will transition from the current position, rather than the start or end position.

fade

<script>
  import { fade } from 'svelte/transition';
  let visible = true;
</script>

<p transition:fade>Fade in and fade out</p>
Copy the code

fly

<script>
  import { fly } from 'svelte/transition';
  let visible = true;
</script>

<! -- fly = "fade" -->
<p transition:fly={{ y: 200.duration: 2000}} >Flying effect display</p>
Copy the code

In and out

<script>
	import { fade, fly } from 'svelte/transition';
</script>

<! -- Perform different actions when entering or leaving -->
<! The transition effect is irreversible if the entering and leaving motions are separated -->
<p in:fly={{ y: 200.duration: 2000 }} out:fade>Show the effect of flying in and fading out</p>
Copy the code

Customize CSS transitions

// This is the code for the built-in fade function
function fade(node, { delay = 0, duration = 400 }) {
  const o = +getComputedStyle(node).opacity;

  // t is a progress value of [0, 1]
  return { delay, duration, css: t= > `opacity: ${t * o}` };
}
Copy the code

Svelte ’emulates’ the transition effect and builds a CSS animation, then gets it running.

For example, the fade transition will produce a CSS animation similar to the following:

0% { opacity: 0 }
10% { opacity: 0.1 }
20% { opacity: 0.2 }
/ *... * /
100% { opacity: 1 }
Copy the code

We can use this feature to customize some CSS animations

<script>
  // This function is a callback
  // Parameter 1: adds a DOM node to the animation
 	// Parameter 2: configuration item
	function spin(node, { duration }) {
    // Return a transition object
    // This object can have delay, duration, CSS
		return {
			duration,
			css: t= > { // A function of '(t, u) => cs code' where u === 1-t
        // Let the value of t not simply from 0 to 1, but according to the different tween function, to produce different progress range and value, to produce different effects
				const eased = elasticOut(t); 
        
				// Return the CSS code
				return `transform: scale(${eased}); `}};</script>
Copy the code

Transition effect events

<p
  transition:fly="{{ y: 200, duration: 2000 }}"
  on:introstart="{() => status = 'intro started'}" 
  on:outrostart="{() => status = 'outro started'}"
  on:introend="{() => status = 'intro ended'}"
  on:outroend="{() => status = 'outro ended'}"
>
  Flies in and out
</p>
Copy the code

Local Transitions

If there is an overkill in the children of the parent element when switching,

When the parent element is switched, the transition effects of the child elements are executed in turn

Sometimes we only want to perform transition effects when we want to add or remove child elements.

<script>
  import { slide } from 'svelte/transition';

  let showItems = true;
  let i = 5;
  let items = [
    'one'.'two'.'three'.'four'.'five'.'six'.'seven'.'eight'.'nine'.'ten'
  ];
</script>

<style>
  div { padding: 0.5 em 0; border-top: 1px solid #eee; }
</style>

<label>
  <input type="checkbox" bind:checked={showItems}>
  show list
</label>

<label>
  <input type="range" bind:value={i} max=10>
</label>

{#if showItems}
  {#each items.slice(0, i) as item}
		<! -- this can be done by using a local transition, which indicates that the transition effect will only be performed when the parent element is added or removed. This means that the action will only be performed when the item is added. Switching between displaying and hiding the entire list will not trigger the action on the item -->

		<! -- You can try to see the difference by removing or adding the local attribute -->
    <div transition:slide|local>{item}</div>
  {/each}
{/if}

Copy the code

Svelte doesn’t have default support for a wide variety of animations, so if some of the effects are particularly compelling, you can wrap them up with custom CSS transitions. Some of them also need to be created with JAVASCRIPT. Svelte also supports this, see the documentation for details