-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added CSS transitions section and scale
- Loading branch information
Showing
50 changed files
with
374 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,228 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="msapplication-tap-highlight" content="no"> | ||
| <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. "> | ||
| <title>CSS Transitions - Materialize</title> | ||
| <!-- Favicons--> | ||
| <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png"> | ||
| <meta name="msapplication-TileColor" content="#FFFFFF"> | ||
| <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png"> | ||
| <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32"> | ||
| <!-- Android 5 Chrome Color--> | ||
| <meta name="theme-color" content="#EE6E73"> | ||
| <!-- CSS--> | ||
| <link href="css/prism.css" rel="stylesheet"> | ||
| <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection"> | ||
| <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css"> | ||
| <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | ||
| <script> | ||
| window.liveSettings = { | ||
| api_key: "a0b49b34b93844c38eaee15690d86413", | ||
| picker: "bottom-right", | ||
| detectlang: true, | ||
| dynamic: true, | ||
| autocollect: true | ||
| }; | ||
| </script> | ||
| <script src="//cdn.transifex.com/live.js"></script> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <nav class="top-nav"> | ||
| <div class="container"> | ||
| <div class="nav-wrapper"><a class="page-title">CSS Transitions</a></div> | ||
| </div> | ||
| </nav> | ||
| <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a></div> | ||
| <ul id="nav-mobile" class="side-nav fixed"> | ||
| <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo"> | ||
| <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li> | ||
| <li class="search"> | ||
| <div class="search-wrapper card"> | ||
| <input id="search"><i class="material-icons">search</i> | ||
| <div class="search-results"></div> | ||
| </div> | ||
| </li> | ||
| <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li> | ||
| <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li> | ||
| <li class="no-padding"> | ||
| <ul class="collapsible collapsible-accordion"> | ||
| <li class="bold"><a class="collapsible-header active waves-effect waves-teal">CSS</a> | ||
| <div class="collapsible-body"> | ||
| <ul> | ||
| <li><a href="color.html">Color</a></li> | ||
| <li><a href="grid.html">Grid</a></li> | ||
| <li><a href="helpers.html">Helpers</a></li> | ||
| <li><a href="media-css.html">Media</a></li> | ||
| <li><a href="sass.html">Sass</a></li> | ||
| <li><a href="shadow.html">Shadow</a></li> | ||
| <li><a href="table.html">Table</a></li> | ||
| <li class="active"><a href="css-transitions.html">Transitions</a></li> | ||
| <li><a href="typography.html">Typography</a></li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a> | ||
| <div class="collapsible-body"> | ||
| <ul> | ||
| <li><a href="badges.html">Badges</a></li> | ||
| <li><a href="buttons.html">Buttons</a></li> | ||
| <li><a href="breadcrumbs.html">Breadcrumbs</a></li> | ||
| <li><a href="cards.html">Cards</a></li> | ||
| <li><a href="chips.html">Chips</a></li> | ||
| <li><a href="collections.html">Collections</a></li> | ||
| <li><a href="footer.html">Footer</a></li> | ||
| <li><a href="forms.html">Forms</a></li> | ||
| <li><a href="icons.html">Icons</a></li> | ||
| <li><a href="navbar.html">Navbar</a></li> | ||
| <li><a href="pagination.html">Pagination</a></li> | ||
| <li><a href="preloader.html">Preloader</a></li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a> | ||
| <div class="collapsible-body"> | ||
| <ul> | ||
| <li><a href="carousel.html">Carousel</a></li> | ||
| <li><a href="collapsible.html">Collapsible</a></li> | ||
| <li><a href="dialogs.html">Dialogs</a></li> | ||
| <li><a href="dropdown.html">Dropdown</a></li> | ||
| <li><a href="media.html">Media</a></li> | ||
| <li><a href="modals.html">Modals</a></li> | ||
| <li><a href="parallax.html">Parallax</a></li> | ||
| <li><a href="pushpin.html">Pushpin</a></li> | ||
| <li><a href="scrollfire.html">ScrollFire</a></li> | ||
| <li><a href="scrollspy.html">Scrollspy</a></li> | ||
| <li><a href="side-nav.html">SideNav</a></li> | ||
| <li><a href="tabs.html">Tabs</a></li> | ||
| <li><a href="transitions.html">Transitions</a></li> | ||
| <li><a href="waves.html">Waves</a></li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </li> | ||
| <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li> | ||
| <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li> | ||
| </ul> | ||
| </header> | ||
| <main><div class="container"> | ||
| <div class="row"> | ||
|
|
||
| <div class="col s12 m9 l10"> | ||
|
|
||
| <div id="scale" class="section scrollspy"> | ||
| <p class="caption">We've made some custom animation classes that will transition your content with only CSS. Each CSS transition consists of a base class that applies the necessary styles and additional classes that control the state of the transition.</p> | ||
|
|
||
| <h4>Scale</h4> | ||
| <p>Use this scale in and out elements. Make sure to add the base transition class <code class="language-markup">scale-transition</code>. Then add the class <code class="language-markup">scale-out</code> to scale the element down until it is hidden. To start something as hidden, add the class <code class="language-markup">scale-out</code> first, and then add the class <code class="language-markup">scale-in</code> to scale the element up until it is shown.</p> | ||
|
|
||
| <a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition"><i class="material-icons">add</i></a> | ||
|
|
||
| <a id="scale-demo-trigger" href="#!" class="btn right">Toggle Scale</a> | ||
|
|
||
| <pre><code class="language-markup"> | ||
| <!-- Scaled in --> | ||
| <a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition"> | ||
| <i class="material-icons">add</i> | ||
| </a> | ||
|
|
||
| <!-- Scaled out --> | ||
| <a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition scale-out"> | ||
| <i class="material-icons">add</i> | ||
| </a> | ||
| </code></pre> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="col hide-on-small-only m3 l2"> | ||
| <div class="toc-wrapper"> | ||
| <div class="buysellads hide-on-small-only"> | ||
| <!-- CarbonAds Zone Code --> | ||
| <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script> | ||
| </div> | ||
| <div style="height: 1px;"> | ||
| <ul class="section table-of-contents"> | ||
| <li><a href="#scale">Scale</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| </main> <footer class="page-footer"> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col l4 s12"> | ||
| <h5 class="white-text">Help Materialize Grow</h5> | ||
| <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p> | ||
| <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> | ||
| <input type="hidden" name="cmd" value="_s-xclick"> | ||
| <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7----- | ||
| "> | ||
| <button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now | ||
| </button> | ||
| </form> | ||
|
|
||
| </div> | ||
| <div class="col l4 s12"> | ||
| <h5 class="white-text">Join the Discussion</h5> | ||
| <p class="grey-text text-lighten-4">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p> | ||
| <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a> | ||
| </div> | ||
| <div class="col l4 s12" style="overflow: hidden;"> | ||
| <h5 class="white-text">Connect</h5> | ||
| <iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe> | ||
| <br> | ||
| <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a> | ||
| <br> | ||
| <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="footer-copyright"> | ||
| <div class="container"> | ||
| © 2014-2016 Materialize, All rights reserved. | ||
| <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
|
|
||
| <!-- Scripts--> | ||
| <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> | ||
| <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); } | ||
| </script> | ||
| <script src="js/jquery.timeago.min.js"></script> | ||
| <script src="js/prism.js"></script> | ||
| <script src="jade/lunr.min.js"></script> | ||
| <script src="jade/search.js"></script> | ||
| <script src="bin/materialize.js"></script> | ||
| <script src="js/init.js"></script> | ||
| <!-- Twitter Button --> | ||
| <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> | ||
|
|
||
| <!-- Google Plus Button--> | ||
| <script src="https://apis.google.com/js/platform.js" async defer></script> | ||
|
|
||
| <!-- Google Analytics --> | ||
| <script> | ||
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | ||
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | ||
| })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | ||
|
|
||
| ga('create', 'UA-56218128-1', 'auto'); | ||
| ga('require', 'displayfeatures'); | ||
| ga('send', 'pageview'); | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.