Reagent + ReactCSSTransitionGroups

gistfile1.txt

(def css-transition-group
  (reagent/adapt-react-class js/React.addons.CSSTransitionGroup))

(defn popup
  [app-state]
  (reagent/create-class
   {:reagent-render
    (fn [app-state]
      (let [popup-state @state
            visible? (:visible popup-state)]
        [:div
         [css-transition-group {:transition-name "zoom"} ; name it after your css transition
          (when visible?
            [:div.animated.zoom-in
             {:key "popup" ; key is important
              }
             [...]])]]))}))

gistfile2.txt

.animated {
  -webkit-animation-duration: 0.125s;
  animation-duration: 0.125s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

}

@-webkit-keyframes zoom-enter {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0.99;
  }
}

@keyframes zoom-enter {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0.99;
  }
}

.zoom-enter {
  -webkit-animation-name: zoom-enter;
  animation-name: zoom-enter;
}

.zoom-enter.zoom-enter-active {
  opacity: 1.0;
}

@-webkit-keyframes zoom-leave {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.01;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}

@keyframes zoom-leave {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.01;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}

.zoom-leave {
  -webkit-animation-name: zoom-leave;
  animation-name: zoom-leave;
}

.zoom-leave.zoom-leave-active {
    opacity: 0;
}

Intro

Be sure to include react-with-addons in your profile.clj

```
[reagent "0.5.0" :exclusions [cljsjs/react]]
[cljsjs/react-with-addons "0.13.1-0"]
```