Svelte: custom transitions

[janwillemtulp]

I like to use d3 to create custom transitions, including when a component is destroyed. Currently, there are several standard transitions available in the svelte-extras package. However, it would be great to be able to create custom transitions or do other stuff perhaps before the component is completely removed from the DOM when it is destroyed. I know that using actions you can decorate your component, but when an element is removed from the DOM, it's still immediate (except with transitions).

So, currently, this is how I achieve custom exit transitions using d3:

transitions: {
      myTransition(node, params) {

        select(node).select('rect').transition()
          .duration(800)
          .attr('transform', `translate(${params.cellWidth / 2}, ${params.cellHeight / 2})`)
          .attr('width', 0)
          .attr('height', 0)

        return {
          delay: 800,
          duration: 0
        }
      }
    },

So, I am returning an object that has a delay that is the same amount as the duration of my custom transition.

It works, so that's nice, but obviously it feels like a hack.

Am I correct that there is currently no 'proper' way to do this? If not, this would be a great feature to add!

Thanks!

[loilo]

@Conduitry pointed me to this one via Discord. I've got a similar problem and I think this is a point where Svelte currently lacks a clear and 3rd-party-friendly API.

In case somebody considers this issue important: the JavaScript hooks for Vue.js transitions provide a clean interface and could be a useful source of inspiration for such an API.

[janwillemtulp]

I actually think Svelte V3 has improved very much on this aspect, with both CSS and Javascript transitions, animations, tweening, etc. https://svelte.dev/docs#Custom_transition_functions For me vue is too much of an overkill for what I need, so right now Svelte is the best fit

[higsch]

How is the state on that? Are there any examples available of how D3 integrates with the custom transition functions?

[janwillemtulp]

Would a beforeDestory() lifecycle function be something that could work in this situation? Currently I have a somewhat similar situation: I use a tween to animate when a certain value changes, and I use a fade transition when the component is added or removed. All works fine, but before the destroy I would like to use my current tween and animate to 0 in my case before (or while) the component is fading out.