This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-10-02
Channels
- # beginners (98)
- # bigdata (1)
- # bitcoin (1)
- # boot (32)
- # cider (20)
- # cljs-dev (57)
- # cljsrn (130)
- # clojure (93)
- # clojure-dusseldorf (1)
- # clojure-germany (1)
- # clojure-greece (3)
- # clojure-italy (2)
- # clojure-russia (203)
- # clojure-spec (14)
- # clojure-uk (50)
- # clojurescript (127)
- # css (7)
- # cursive (6)
- # data-science (1)
- # datomic (4)
- # emacs (1)
- # events (1)
- # fulcro (8)
- # funcool (12)
- # graphql (7)
- # jobs (1)
- # lein-figwheel (2)
- # luminus (2)
- # off-topic (7)
- # om (16)
- # onyx (4)
- # parinfer (17)
- # pedestal (6)
- # portkey (36)
- # proton (3)
- # re-frame (10)
- # shadow-cljs (140)
- # spacemacs (12)
- # specter (1)
- # sql (1)
- # vim (10)
- # yada (10)
@noprompt is there a way to create css @keyframes
with garden?
found the answer 🙂 garden.stylesheet/at-keyframes
@wilkerlucio this is something that needs to be in the README and i apologize for it not being there.
(require '[garden.def :refer [defrule defkeyframes]])
(defkeyframes pulse
[:from
{:opacity 0}]
[:to
{:opacity 1}])
(css {:vendors ["webkit"]
:output-to "foo.css"}
;; Include our keyframes
pulse
[:h1
;; Notice we don't need to quote pulse.
^:prefix {:animation [[pulse "2s" :infinite :alternate]]}])
@keyframes pulse {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes pulse {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
h1 {
-webkit-animation: pulse 2s infinite alternate;
animation: pulse 2s infinite alternate;
}
thanks, I found it on a changelog, garden is really awesome 🙂
I like the inline version better, I'm using with Fulcro, so I can make localized animations per component, the combo of Fulcro + Garden for CSS is the best way to handle css for react components that I found so far