{"id":3923,"date":"2024-08-12T12:44:11","date_gmt":"2024-08-12T10:44:11","guid":{"rendered":"https:\/\/vielhuber.de\/?p=3923"},"modified":"2024-08-12T13:11:18","modified_gmt":"2024-08-12T11:11:18","slug":"height-0-zu-height-auto-mit-css-animieren","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/height-0-zu-height-auto-mit-css-animieren\/","title":{"rendered":"height: 0 zu height: auto mit CSS animieren"},"content":{"rendered":"\n<p>CSS-\u00dcberg\u00e4nge sind eine gute M\u00f6glichkeit, Interaktivit\u00e4t zu erzeugen. Es gen\u00fcgt, <code>transition<\/code> auf den Ausgangszustand eines Elements anzuwenden, und der Browser animiert den \u00dcbergang zwischen den beiden Zust\u00e4nden. \u00dcberg\u00e4nge f\u00fcr intrinsische Elementgr\u00f6\u00dfen wie <code>auto<\/code> sind jedoch seit Jahrzehnten ein Problem f\u00fcr Webentwickler, und die einzige M\u00f6glichkeit bestand darin, die H\u00f6he dynamisch mit JavaScript zu berechnen.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Eine weitere Herausforderung ist, \u00dcberg\u00e4nge zu starten, wenn ein Element seinen ersten Stil erh\u00e4lt \u2013 etwa beim Hinzuf\u00fcgen zum DOM oder wenn sich der <code>display<\/code>-Wert von <code>none<\/code> \u00e4ndert. In diesem Artikel wird erkl\u00e4rt, wie dieses Problem mit den neuen CSS-Funktionen wie <code>calc-size()<\/code>, <code>interpolate-size<\/code>, <code>@starting-style<\/code> und <code>transition-behavior<\/code> bew\u00e4ltigt werden kann.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">L\u00f6sung mit <code>calc-size()<\/code><\/h2>\n\n\n\n<p>Wenn man ein DOM-Element hat, das von einem geschlossenen Zustand (<code>height: 0<\/code>) zu einem offenen Zustand (<code>height: auto<\/code>) \u00fcbergeht, wird die Animation in der Regel nicht ausgef\u00fchrt, obwohl die <code>transition<\/code>-Eigenschaft gesetzt ist. Das liegt daran, dass Browser keine \u00dcberg\u00e4nge zu intrinsischen Gr\u00f6\u00dfen wie <code>auto<\/code> unterst\u00fctzen. Die neue <code>calc-size()<\/code>-Funktion erm\u00f6glicht jedoch Berechnungen auf diesen intrinsischen Gr\u00f6\u00dfen und damit auch \u00dcberg\u00e4nge:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"1.css\">f95f6dcb193aa903adc84ce47bc4a296<\/p>\n\n\n\n<p>Die <code>calc-size()<\/code>-Funktion ist noch nicht in allen Browsern verf\u00fcgbar. Ein Fallback kann durch das Beibehalten der urspr\u00fcnglichen <code>height: auto<\/code>-Deklaration erreicht werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">L\u00f6sung mit <code>interpolate-size<\/code><\/h2>\n\n\n\n<p>Die <code>interpolate-size<\/code>-Eigenschaft erlaubt es, das Interpolationsverhalten von Browsern festzulegen und zu entscheiden, ob diese zwischen Schl\u00fcsselw\u00f6rtern wie <code>auto<\/code> interpolieren sollen. Standardm\u00e4\u00dfig wird nur zwischen numerischen Werten interpoliert. Mit <code>allow-keywords<\/code> kannst du jedoch \u00dcberg\u00e4nge zwischen Schl\u00fcsselw\u00f6rtern aktivieren:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"2.css\">f95f6dcb193aa903adc84ce47bc4a296<\/p>\n\n\n\n<p>Indem du <code>interpolate-size: allow-keywords<\/code> auf das <code>:root<\/code>-Element anwendest, aktivierst du das neue Verhalten f\u00fcr die gesamte Seite.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00dcbergang von <code>display:none<\/code><\/h2>\n\n\n\n<p>Ein weiteres Problem tritt auf, wenn ein Element von <code>display:none<\/code> zu einem sichtbaren Zustand \u00fcbergeht. Da <code>display<\/code> keine animierbare Eigenschaft ist, findet keine Animation statt. Hier helfen die neuen CSS-Funktionen <code>@starting-style<\/code> und <code>transition-behavior<\/code>:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"3.css\">f95f6dcb193aa903adc84ce47bc4a296<\/p>\n\n\n\n<p>Mit <code>transition-behavior: allow-discrete<\/code> wird sichergestellt, dass die Animation ausgef\u00fchrt wird, bevor der <code>display<\/code>-Wert von <code>block<\/code> auf <code>none<\/code> umgeschaltet wird. Diese Regeln erm\u00f6glichen es, \u00dcberg\u00e4nge auch bei einem ersten Stil-Update auszuf\u00fchren. Die <code>@starting-style<\/code>-Regel stellt sicher, dass die Animation bei einem ersten Stil-Update korrekt ausgef\u00fchrt wird.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Browser-Unterst\u00fctzung<\/h2>\n\n\n\n<p>Derzeit werden die neuen Eigenschaften <code>calc-size()<\/code> und <code>interpolate-size<\/code> noch nicht von allen Browsern unterst\u00fctzt. In Chrome sind sie hinter einem Experiment-Flag verf\u00fcgbar, in Safari und Firefox jedoch noch nicht. Ebenso ist die Unterst\u00fctzung f\u00fcr <code>transition-behavior<\/code> in Chrome und Edge vorhanden, aber nicht in Safari und Firefox. Das wird sich in Zukunft hoffentlich \u00e4ndern.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS-\u00dcberg\u00e4nge sind eine gute M\u00f6glichkeit, Interaktivit\u00e4t zu erzeugen. Es gen\u00fcgt, transition auf den Ausgangszustand eines Elements anzuwenden, und der Browser animiert den \u00dcbergang zwischen den beiden Zust\u00e4nden. \u00dcberg\u00e4nge f\u00fcr intrinsische Elementgr\u00f6\u00dfen wie auto sind jedoch seit Jahrzehnten ein Problem f\u00fcr Webentwickler, und die einzige M\u00f6glichkeit bestand darin, die H\u00f6he dynamisch mit JavaScript zu berechnen.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"gtbabel_prevent_lngs":"","gtbabel_alt_lng":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-3923","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>height: 0 zu height: auto mit CSS animieren &#060; Vielhuber David<\/title>\n<meta name=\"description\" content=\"CSS-\u00dcberg\u00e4nge sind eine gute M\u00f6glichkeit, Interaktivit\u00e4t zu erzeugen. Es gen\u00fcgt, transition auf den Ausgangszustand eines Elements anzuwenden, un...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vielhuber.de\/blog\/height-0-zu-height-auto-mit-css-animieren\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"height: 0 zu height: auto mit CSS animieren &#060; Vielhuber David\" \/>\n<meta property=\"og:description\" content=\"CSS-\u00dcberg\u00e4nge sind eine gute M\u00f6glichkeit, Interaktivit\u00e4t zu erzeugen. Es gen\u00fcgt, transition auf den Ausgangszustand eines Elements anzuwenden, und der\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/height-0-zu-height-auto-mit-css-animieren\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-12T10:44:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-12T11:11:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"552\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:site\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/height-0-zu-height-auto-mit-css-animieren\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/height-0-zu-height-auto-mit-css-animieren\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"height: 0 zu height: auto mit CSS animieren\",\"datePublished\":\"2024-08-12T10:44:11+00:00\",\"dateModified\":\"2024-08-12T11:11:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/height-0-zu-height-auto-mit-css-animieren\\\/\"},\"wordCount\":420,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/height-0-zu-height-auto-mit-css-animieren\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/height-0-zu-height-auto-mit-css-animieren\\\/\",\"name\":\"height: 0 zu height: auto mit CSS animieren &#060; Vielhuber David\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"datePublished\":\"2024-08-12T10:44:11+00:00\",\"dateModified\":\"2024-08-12T11:11:18+00:00\",\"description\":\"CSS-\u00dcberg\u00e4nge sind eine gute M\u00f6glichkeit, Interaktivit\u00e4t zu erzeugen. Es gen\u00fcgt, transition auf den Ausgangszustand eines Elements anzuwenden, und der\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/height-0-zu-height-auto-mit-css-animieren\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/height-0-zu-height-auto-mit-css-animieren\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/height-0-zu-height-auto-mit-css-animieren\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"height: 0 zu height: auto mit CSS animieren\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/\",\"name\":\"Vielhuber David\",\"description\":\"Full-Stack Developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vielhuber.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"width\":700,\"height\":552,\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/vielhuber\"]}]}<\/script>","yoast_head_json":{"title":"height: 0 zu height: auto mit CSS animieren &#060; Vielhuber David","description":"CSS-\u00dcberg\u00e4nge sind eine gute M\u00f6glichkeit, Interaktivit\u00e4t zu erzeugen. Es gen\u00fcgt, transition auf den Ausgangszustand eines Elements anzuwenden, un...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vielhuber.de\/blog\/height-0-zu-height-auto-mit-css-animieren\/","og_locale":"de_DE","og_type":"article","og_title":"height: 0 zu height: auto mit CSS animieren &#060; Vielhuber David","og_description":"CSS-\u00dcberg\u00e4nge sind eine gute M\u00f6glichkeit, Interaktivit\u00e4t zu erzeugen. Es gen\u00fcgt, transition auf den Ausgangszustand eines Elements anzuwenden, und der","og_url":"https:\/\/vielhuber.de\/blog\/height-0-zu-height-auto-mit-css-animieren\/","og_site_name":"Vielhuber David","article_published_time":"2024-08-12T10:44:11+00:00","article_modified_time":"2024-08-12T11:11:18+00:00","og_image":[{"width":700,"height":552,"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","type":"image\/jpeg"}],"author":"David","twitter_card":"summary_large_image","twitter_creator":"@vielhuber","twitter_site":"@vielhuber","twitter_misc":{"Verfasst von":"David","Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vielhuber.de\/blog\/height-0-zu-height-auto-mit-css-animieren\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/height-0-zu-height-auto-mit-css-animieren\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"height: 0 zu height: auto mit CSS animieren","datePublished":"2024-08-12T10:44:11+00:00","dateModified":"2024-08-12T11:11:18+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/height-0-zu-height-auto-mit-css-animieren\/"},"wordCount":420,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/height-0-zu-height-auto-mit-css-animieren\/","url":"https:\/\/vielhuber.de\/blog\/height-0-zu-height-auto-mit-css-animieren\/","name":"height: 0 zu height: auto mit CSS animieren &#060; Vielhuber David","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"datePublished":"2024-08-12T10:44:11+00:00","dateModified":"2024-08-12T11:11:18+00:00","description":"CSS-\u00dcberg\u00e4nge sind eine gute M\u00f6glichkeit, Interaktivit\u00e4t zu erzeugen. Es gen\u00fcgt, transition auf den Ausgangszustand eines Elements anzuwenden, und der","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/height-0-zu-height-auto-mit-css-animieren\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/height-0-zu-height-auto-mit-css-animieren\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/height-0-zu-height-auto-mit-css-animieren\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"height: 0 zu height: auto mit CSS animieren"}]},{"@type":"WebSite","@id":"https:\/\/vielhuber.de\/#website","url":"https:\/\/vielhuber.de\/","name":"Vielhuber David","description":"Full-Stack Developer","publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vielhuber.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef","name":"David","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","width":700,"height":552,"caption":"David"},"logo":{"@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg"},"sameAs":["https:\/\/x.com\/vielhuber"]}]}},"_links":{"self":[{"href":"https:\/\/vielhuber.de\/da\/wp-json\/wp\/v2\/posts\/3923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/da\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/da\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/da\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/da\/wp-json\/wp\/v2\/comments?post=3923"}],"version-history":[{"count":7,"href":"https:\/\/vielhuber.de\/da\/wp-json\/wp\/v2\/posts\/3923\/revisions"}],"predecessor-version":[{"id":3932,"href":"https:\/\/vielhuber.de\/da\/wp-json\/wp\/v2\/posts\/3923\/revisions\/3932"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/da\/wp-json\/wp\/v2\/media?parent=3923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/da\/wp-json\/wp\/v2\/categories?post=3923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/da\/wp-json\/wp\/v2\/tags?post=3923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}