transition-example-sliding-in

anim.css

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;
}

animate.cljs

(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})