docs and a fix for #3761

pull/3762/head
Richard Harris 5 years ago
parent 714508ccc5
commit e8f5b24143

@ -433,6 +433,19 @@ Out of the box, Svelte will interpolate between two numbers, two arrays or two o
---
If the initial value is `undefined` or `null`, the first value change will take effect immediately. This is useful when you have tweened values that are based on props, and don't want any motion when the component first renders.
```js
const size = tweened(undefined, {
duration: 300,
easing: cubicOut
});
$: $size = big ? 100 : 10;
```
---
The `interpolate` option allows you to tween between *any* arbitrary values. It must be an `(a, b) => t => value` function, where `a` is the starting value, `b` is the target value, `t` is a number between 0 and 1, and `value` is the result. For example, we can use the [d3-interpolate](https://github.com/d3/d3-interpolate) package to smoothly interpolate between two colours.
```html
@ -493,6 +506,15 @@ Both `set` and `update` can take a second argument — an object with `hard` or
</script>
```
---
If the initial value is `undefined` or `null`, the first value change will take effect immediately, just as with `tweened` values (see above).
```js
const size = spring();
$: $size = big ? 100 : 10;
```
### `svelte/transition`
The `svelte/transition` module exports six functions: `fade`, `fly`, `slide`, `scale`, `draw` and `crossfade`. They are for use with svelte [`transitions`](docs#Transitions).

@ -87,9 +87,9 @@ export function spring<T=any>(value?: T, opts: SpringOpts = {}): Spring<T> {
if (value == null || opts.hard || (spring.stiffness >= 1 && spring.damping >= 1)) {
cancel_task = true; // cancel any running animation
last_time = now();
last_value = value;
last_value = new_value;
store.set(value = target_value);
return new Promise(f => f()); // fulfil immediately
return Promise.resolve();
} else if (opts.soft) {
const rate = opts.soft === true ? .5 : +opts.soft;
inv_mass_recovery_rate = 1 / (rate * 60);

Loading…
Cancel
Save