zaceno / hyperapp-transitions Goto Github PK

Hi there again :) I'm currently unavailable to ultradom because of this jorgebucaran/superfine#66

Is it possible to use another virtual-dom library for this awesome transition-library, like https://github.com/yelouafi/petit-dom? What is required for the virtual-dom library, to implement oncreate, ondelete hooks? Possibility to supply style as an object? Would be awesome with some documentation of how to get it to work.

By the way, I love the new API, crystal clear 🥇 🏆 🎉

And by the way n.2 shouldn't the default easing be 'ease-in-out'? That's the default in the browser and is used by 2/3 of your examples 😆

When I use hyperapp/transitions with the following code:

import { Enter, Exit } from "transitions"
import { h } from 'hyperapp';

export const Home = () => (state, actions) => (
<Enter easing="ease-in-out" css={{opacity: "0"}}>
  <Exit easing="ease-in-out" css={{opacity: "0", transform: "scale(2.0,2.0)"}}>
    <div key="home"><h1>Home</h1></div>
  </Exit>
</Enter>);

It is not showing any transitions, and it is rendering as the following:

<undefined easing="ease-in-out" css="[object Object]">
  <undefined easing="ease-in-out" css="[object Object]">
    <div>
      <h1>Home</h1>
    </div>
  </undefined>
</undefined>

I am using:
hyperapp/transitions: 1.0.2
hyperapp: 1.2.5

Is this a bug, or a mistake on my part?

https://codepen.io/zaceno/pen/XzOwPd

If you use 1000ms time or so, and you click the button relatively fast, you'll notice glitchy behavior/transitions, due to the fact that timeouts aren't cleared if there are pending ones.

function runTransition (el, attr, before, after, ondone) {
    var easing = attr.easing || 'linear'
    var time = attr.time || 300
    var delay = attr.delay || 0
    setStyle(el, before)
    setTimeout(function () {
        requestAnimationFrame(function () {
            setStyle(el, after)
            el.style.transition = 'all ' + easing + ' ' + time + 'ms'

          // HERE:
          // clear current pending timeout (if any) before setting another timeout

            setTimeout(function () {
                el.style.transition = null
                ondone && ondone()
            }, time)
        })
    }, delay)
}

It would be great if the README had one or more animated gif examples. For example:

Is there any reason the order of transitions should matter?

I'm finding that the following skips the entry transition:

<transitions.enter time={ 500 } css={ { opacity: '0' } }>
    <transitions.exit time={ 500 } css={ _ => ({ opacity: '0' }) }>
        <div key={ id } ></div>
    </transitions.exit>
</transitions.enter>

but if exit is on the outside it works fine:

<transitions.exit time={ 500 } css={ _ => ({ opacity: '0' }) }>
    <transitions.enter time={ 500 } css={ { opacity: '0' } }>
        <div key={ id } ></div>
    </transitions.enter>
</transitions.exit>

Have you come across this behaviour? Is it intentional?

The examples here are broken due to the change of the api in ultradom...

https://codepen.io/zaceno/pen/PEmEbW

When you only use a move transition (no exit transition), it makes it so the element does not dissapear when the node is removed.

Until I fix this the workaround is to use:

onremove: (el, done) => done()

on the transitioned node, to make it removable.

Seems the 3 examples all use jsx. Do we need to do something special to make it work with @hyperapp/html?

The latest update to hyperapp introduced a bug in transitions, you can notice in the toasts example when toasts are removed. (Janky behavior)

This is a sweet little minimal lib, just wanted to say thanks, great work!

https://github.com/picodom/picodom/blob/d2368aacf771032eb7b5e25ff11d9b4e8cbe349e/src/patch.js#L89-L98

picodom is using onremove while hyperapp is using onbeforeremove, transitions's exit only support onbeforeremove.

If scroll changes while nodes are 'leaving', their transform matrix takes into account any change in scroll position

Edit: after looking at the source is seems that a change in scroll position while a node is being acted on by _leaveOnRemove the change is captured as a transform (here) and then applied to the node (here)

Cool library, are you using FLIP transitions for this?

1. Go to this example:
   https://codepen.io/zaceno/pen/awRxaN
2. Press new message twice.

The first message is not transitioned down smoothly.

How could you remove it!!!

The route https://unpkg.com/@hyperapp/transitions doesn't work,
But this work:
https://unpkg.com/@hyperapp/[email protected]/dist/transitions.js

So the codepen examples are broken..

This is incompatible with newer hyperapp versions since 0.12.0 I think, because the vdom changed the name of the data property of a vnode to props. In hyperapp -- but not yet in picodom

So the steps to fix this are:

[ ] replace all .data with .props in picodom
[ ] replace all .data with .props in hyperapp-transitions

I've created a little learning project with hyperapp and @hyperapp/transitions and have run into a strange issue. When adding some of the larger quotes, the containing blockquote element appears to only partially paint. If I do anything to alter the screen (i.e. show the browsers toolbar, hover elements in the devtools inspector, tab away and back, highlight the text with ctrl + a or whatever) it will snap to the correct render.

The Project Code

Live Demo

Just click the quote on the demo and sometimes the larger quotes will reproduce the issue.

I'm using Firefox Quantum 60.0.2 on Ubuntu MATE. Let me know if you need more info.

when i use with @hyperapp/router, there is no animation, and it shows ”[object Object]“

it's my code:

import {h, app} from "hyperapp" // 1.2.5
import {Link, Route, location} from "@hyperapp/router" // 0.7.0
import {Enter, Exit} from "@hyperapp/transitions" // 1.0.2

const Home = () =>
    <Enter css={{opacity: "0"}}>
        <Exit css={{opacity: "0", transform: "scale(2.0,2.0)"}}>
            <h2>Home</h2>
        </Exit>
    </Enter>

const About = () =>
    <Enter css={{opacity: "0"}}>
        <Exit css={{opacity: "0", transform: "scale(2.0,2.0)"}}>
            <h2>About</h2>
        </Exit>
    </Enter>

const state = {
    location: location.state
};

const actions = {
    location: location.actions
};

const view = state => (
    <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>

        <hr/>

        <Route path="/" render={Home}/>
        <Route path="/about" render={About}/>
    </div>
);

const main = app(state, actions, view, document.body)

const unsubscribe = location.subscribe(main.location)

I found the examples a bit tricky to read, I suggest improving them as follows:

• Follow Hyperapp's style: 2 space indentation, bracket spacing, double quotes, avoid _ for paramless functions
• Avoid cryptic/shortened variable names
• Use named params for state, actions & view for readability
• Shorten shuffle algo with destructuring assignment
• For add, always place the new message at the beginning of the array so it appears on top - it's confusing having it appear randomly in the order (to me)
• Styling could also be enhanced to make it prettier 😜

Here is Toasts:

const { h, app } = hyperapp
const { Move, Enter, Exit } = transitions
/** @jsx h */

const Toast = ({ message, remove }, children) => (
  <Move easing="ease-in-out">
    <Exit
      easing="ease-in-out"
      css={{ transform: "scale(2.0, 2.0)", opacity: "0" }}
    >
      <Enter
        easing="ease-in-out"
        css={{ transform: "translateX(100%)", opacity: "0" }}
      >
        <div class="message" key={message} onclick={() => remove(message)}>
          {message}
        </div>
      </Enter>
    </Exit>
  </Move>
)

const state = {
  messages: []
}

const actions = {
  add: () => state => {
    const newMessage = btoa("" + Math.random()).slice(3, 11)
    return { messages: [newMessage, ...state.messages] }
  },
  remove: message => state => ({
    messages: state.messages.filter(m => m !== message)
  }),
  reset: () => ({ messages: [] }),
  shuffle: () => state => {
    const messages = [...state.messages]
    let m = messages.length
    while (m) {
      const i = Math.floor(Math.random() * m--)
      ;[messages[m], messages[i]] = [messages[i], messages[m]]
    }
    return { messages }
  }
}

const view = (state, actions) => (
  <main class="app">
    <button onclick={actions.add}>Add</button>
    <button onclick={actions.reset}>Reset</button>
    <button onclick={actions.shuffle}>Shuffle</button>
    Click toasts to remove them.
    <div class="messages">
      {state.messages.map(message => (
        <Toast message={message} remove={actions.remove} />
      ))}
    </div>
  </main>
)

app(state, actions, view, document.body)