Play: Explore replacing jQuery effects with CSS transitions

Author: dmsnell

priv/www/nitrogen.css

@@ -297,3 +297,15 @@ a.upload_delete_file:hover {
     left:-10000px;
 }
 
+.n2-effect-appear {
+    transition: height 0ms 500ms, opacity 500ms;
+    height: auto;
+    opacity: inherit;
+}
+
+.n2-effect-fade {
+    transition: height 0ms 500ms, opacity 500ms;
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+}

src/actions/action_jquery_effect.erl

@@ -39,10 +39,10 @@ render_action(Record) ->
         'toggle' when Effect==none ->
             ["toggle(", ActionsFun, ");"];
         'appear' ->
-            if_visible(Actions, [wf:f("$(this).fadeIn(~p, ", [Speed]), ActionsFun, ");"]);
+            {raw, [wf:f("document.querySelectorAll('~s')", [Target]), ".forEach(node => { node.classList.remove('n2-effect-fade'); node.classList.add('n2-effect', 'n2-effect-appear'); } )"]};
         'fade'   ->
-            if_visible([wf:f("$(this).fadeOut(~p, ", [Speed]), ActionsFun, ");"], Actions);
-        'slideup'->
+            {raw, [wf:f("document.querySelectorAll('~s')", [Target]), ".forEach(node => { node.classList.remove('n2-effect-appear'); node.classList.add('n2-effect', 'n2-effect-fade'); } )"]};
+        'slideup' ->
             if_visible([wf:f("$(this).slideUp(~p, ",[Speed]), ActionsFun, ");"], Actions);
         'slidedown' ->
             if_visible(Actions, [wf:f("$(this).slideDown(~p, ",[Speed]), ActionsFun, ");"]);
@@ -65,7 +65,12 @@ render_action(Record) ->
         'animate' ->
             [wf:f("animate(~s, ~p, '~s', ", [Options, Speed, Easing]), ActionsFun, ");"]
     end,
-    [wf:f("objs('~s').", [Target]), Script].
+    R = case Script of
+        {raw, S} -> S;
+        S        -> [wf:f("objs('~s').", [Target]), Script]
+    end,
+    io:format("Effect: ~p~n", [R]),
+    R.
 
 execute_actions_fun("null") ->
     "";