Translating deprecated examples

[ghost]

I know that a number of the functions are deprecated (for good reasons as in #5), but some of them are really ergonomic, like pop-when.

Want to pop ui elements in and out? Use pop-when. You could have used a scale spring instead though.

(let [show? (reagent/atom true)]
  (fn a-pop-when-example []
    [:div
     [:button {:on-click (anim/toggle-handler show?)} "Pop!"]
     [anim/pop-when
      @show?
      [:center
       [:svg [:circle {:r 50, :cx 50, :cy 50, :fill "green"}]]]]]))

It would be good to have the examples moved over to use their suggested forms, with maybe a note about the signature change. Not a big deal, but this issue can at least track that.

[ghost]

Here's an attempt at building something that expands vertically. Doesn't interpolate as intended, and holds the maximum height open in the DOM even when @show is false.

(defn mount-expander [component expander key]
  "Mounts expanding content to the DOM and animates it in when show? is
  true."
  (let [show? (reagent/atom false)
        dest-scale (reagent/atom 0)
        inter-scale (anim/spring dest-scale {:duration 300})]
    (fn []
      [:div {:on-click #(do (reset! show? (not @show?))
                            (if @show?
                              (swap! dest-scale + 1)
                              (swap! dest-scale - 1))
                            (js/console.log (str "show: " @show?))
                            (js/console.log (str "scale: " @dest-scale)))}
       component
       [:div.expanded
        {:style {:height (str (* 100 @dest-scale) "%")
                 :transform (str "scaleY(" @dest-scale ")")}}
        expander]])))

[timothypratley]

Hi @bright-star

Yes I agree. Are you interested in making a pull request with your change?

Also if pop-when is useful, we don't need to deprecate it (so long as it does what you want!) I just wasn't finding much use for it. I guess mount-expander is a better replacement because it uses a spring so looks better? Could you please describe a little bit the intended use?

[ghost]

Well, my goal was to have a function that "springifies" a portion of the DOM to be mounted/unmounted. That's the main thing that's nice about pop-when: you just call (anim/pop-when @show? component {:duration 100}) and you're off to the races.

I was hoping to produce a minimum working example of that behavior with spring, since interpolate-to has the same signature. mount-expander is an attempt at that using scaleY since your devcard suggested it. If I can get that working, basically every "pop" effect can be a variation on that, which would probably make for a good PR with a few different examples.

[timothypratley]

I see yup that makes sense. Thanks!