andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rebuild docs

Browse Source
This commit is contained in:
Stefan Feješ
2018-03-18 20:55:19 +01:00
parent 7c8ee20df1
commit d98ed4203a
6 changed files with 145 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/51a402ced656eeea80dcb3b08a0ac425.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

9
docs/6c831ee080ce0f905632cb113dfa17d9.css Normal file
View File

File diff suppressed because one or more lines are too long

30
docs/6c831ee080ce0f905632cb113dfa17d9.js Normal file
View File

File diff suppressed because one or more lines are too long

BIN
docs/e4fdfce991c164037b4cd78667aa2afd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

23
docs/index.html
View File

File diff suppressed because one or more lines are too long

87
index.html
View File

@ -53,6 +53,7 @@
<a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a>
<a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a>
<a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a>
<a class="sidebar__link" href="#height-transition"><span>Height transition</span></a>
<a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a>
</section>
<section data-type="interactivity" class="sidebar__section">
@ -1369,6 +1370,92 @@ in any specification.</span></p>
<!-- tags: visual -->
</div>
<div class="snippet">
<h3 id="height-transition"><span>Height transition</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3>
<p>Transitions an element's height from <code>0</code> to <code>auto</code> when its height is unknown.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="trigger"&gt;
Hover me to see a height transition.
&lt;div class="el"&gt;content&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.el {
transition: max-height 0.5s;
overflow: hidden;
max-height: 0;
}
.trigger:hover &gt; .el {
max-height: var(--max-height);
}
</code></pre>
<h4 data-type="JavaScript">JavaScript</h4><pre><code class="lang-js">var el = document.querySelector('.el')
var height = el.scrollHeight
el.style.setProperty('--max-height', height + 'px')
</code></pre>
<h4>Demo</h4>
<div class="snippet-demo">
<div class="snippet-demo__height-transition">
Hover me to see a height transition.
<div class="snippet-demo__height-transition__el">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue placerat nunc a volutpat. Etiam placerat libero porttitor purus facilisis vehicula. Mauris risus mauris, varius ac consequat eget, iaculis non enim. Proin ut nunc ac massa iaculis
sodales id mattis enim. Cras non diam ac quam pharetra fermentum vel ac nulla. Suspendisse ligula urna, porta non lobortis non, lobortis vel velit. Fusce lectus justo, aliquet eu fringilla auctor, sodales eu orci. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</div>
</div>
<style>
.snippet-demo__height-transition__el {
transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
overflow: hidden;
max-height: 0;
}
.snippet-demo__height-transition:hover>.snippet-demo__height-transition__el {
max-height: var(--max-height);
}
</style>
<script>
(function() {
var el = document.querySelector('.snippet-demo__height-transition__el')
var height = el.scrollHeight
el.style.setProperty('--max-height', height + 'px')
})()
</script>
<h4>Explanation</h4>
<h5 data-type="CSS">CSS</h5>
<ol>
<li><code>transition: max-height: 0.5s cubic-bezier(...)</code> specifies that changes to <code>max-height</code> should be transitioned over 0.5 seconds, using an <code>ease-out-quint</code> timing function.</li>
<li><code>overflow: hidden</code> prevents the contents of the hidden element from overflowing its container.</li>
<li><code>max-height: 0</code> specifies that the element has no height initially.</li>
<li><code>.target:hover &gt; .el</code> specifies that when the parent is hovered over, target a child <code>.el</code> within it and use the <code>--max-height</code> variable which was defined by JavaScript.</li>
</ol>
<h5 data-type="JavaScript">JavaScript</h5>
<ol>
<li><code>el.scrollHeight</code> is the height of the element including overflow, which will change dynamically based on the content of the element.</li>
<li><code>el.style.setProperty(...)</code> sets the <code>--max-height</code> CSS variable which is used to specify the <code>max-height</code> of the element the target is hovered over, allowing it to transition smoothly from 0 to auto.</li>
</ol>
<h4>Browser Support</h4>
<div>
<div class="snippet__browser-support">
88.0%
</div>
</div>
<p></p>
<div class="snippet__requires-javascript">Requires JavaScript</div>
<span class="snippet__support-note">
⚠️ Causes reflow on each animation frame, which will be laggy if there are a large number of elements
beneath the element that is transitioning in height.
</span>
<p></p>
<ul>
<li>
<a href="https://caniuse.com/#feat=css-variables" target="_blank">https://caniuse.com/#feat=css-variables</a>
</li>
<li>
<a href="https://caniuse.com/#feat=css-transitions" target="_blank">https://caniuse.com/#feat=css-transitions</a>
</li>
</ul>
<!-- tags: animation -->
</div>
<div class="snippet">
<h3 id="hover-underline-animation"><span>Hover underline animation</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3>
<p>Creates an animated underline effect when the text is hovered over.</p>