Skip to content

Instantly share code, notes, and snippets.

@Conaws
Last active October 11, 2016 12:26
Show Gist options
  • Save Conaws/2078e9048dc820da35618737f1d86dd2 to your computer and use it in GitHub Desktop.
Save Conaws/2078e9048dc820da35618737f1d86dd2 to your computer and use it in GitHub Desktop.
transition-example-sliding-in
ul.todo-list {background-color: blue;
list-style: none;}
.todo {color: white;
padding: 20px;}
.todo-enter {opacity: 0.01;}
.todo-enter.todo-enter-active {opacity: 1;
transition: opacity 500ms ease-in;}
.todo-leave {opacity: 1;}
.todo-leave.todo-leave-active {opacity: 0.01;
transition: opacity 500ms ease-in;}
.slider {width: 100%;
height: 50px;
padding: 10px 0px;
border: 2px solid white;
color: white;}
.slide-enter {
transform: translate(100%);
height: 0px;
}
.slide-enter.slide-enter-active {
transform: translate(0%);
height: 100px;
transition: transform 1000ms ease-in-out,
height 1000ms ease-in-out;
}
.slide-leave {
transform: translate(0%);
}
.slide-leave.slide-leave-active {
transform: translate(-110%);
opacity: 0.01;
transition: transform 1000ms ease-in-out,
opacity 2000ms ease-out;
}
(def samples (r/atom {:a 1 :b 2 :c 3 :d 4}))
(defn anim1 [samples]
[:div
[:button
{:on-click #(swap! samples assoc (rand-int 10000) (str (rand-int 10000) "Node"))}]
[anim/css-transition-group
{:transition-name "todo"
:transition-enter-timeout 500
:transition-leave-timeout 500
:component "ul"
:class "todo-list"}
(doall
(for [[idx item] @samples]
[:li.todo
{:key idx}
item
[:button.btn
{:style {:float "right"}
:on-click #(swap! samples dissoc idx)}
"X"]]
))]])
(defcard-rg anim-c
[anim1 samples]
samples
{:inspect-data true
:history true})
(defn anim2 [samples]
[:div
[:button
{:on-click #(swap! samples assoc (rand-int 10000) (str (rand-int 10000) "Node"))}]
[anim/css-transition-group
{:transition-name "slide"
:transition-enter-timeout 1000
:transition-leave-timeout 1000
:component "ul"
:class "todo-list"}
(doall
(for [[idx item] (reverse @samples)]
[:li.slider
{:key idx}
item
[:button.btn
{:style {:float "right"}
:on-click #(swap! samples dissoc idx)}
"X"]]
))]])
(defcard-rg anim-slide-c
[anim2 samples]
samples
{:inspect-data true
:history true})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment