Material Card Expand Animation
How do I make an material card expand animation?
What is a material card expand animation? How do you make a material card expand animation? This script and codes were developed by Chris Sargent on 01 November 2022, Tuesday.
Material Card Expand Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Card Expand Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<div class="page-wrap" ng-app="myApp" ng-controller="uiCtrl"> <button class="control" ng-click="changeState()">Next Step</button> <div class="card-wrap" ng-class="currentState"> <article class="material-card"> <header> <div class="avatar"></div> <div class="header-text"> <h1 class="title">Title</h1> <span class="subtitle">Subhead</span> </div> </header> <div class="media-area"></div> <div class="supporting-content"> <span>Post-ironic helvetica mlkshk, readymade whatever meditation blog offal irony. Pop-up kickstarter seitan iPhone.</span> </div> <div class="expandable"> <div class="actions"> <button class="btn-action" ng-click="autoState()"> <span class="action-text">Details ▾</span> </button> </div> <div class="details"> <span>All of the details will go here.</span> <img src="http://fillmurray.com/300/200"> <span>Food truck kitsch jean shorts farm-to-table. Single-origin coffee 8-bit gochujang taxidermy, ramps before they sold out neutra farm-to-table franzen iPhone truffaut selvage XOXO microdosing. Whatever affogato DIY typewriter, cold-pressed banh mi four dollar toast literally mustache put a bird on it truffaut try-hard dreamcatcher. Paleo kombucha lomo forage disrupt etsy. Tofu keffiyeh kombucha wayfarers umami, food truck art party keytar. Roof party polaroid chartreuse trust fund chillwave fap wayfarers, selfies before they sold out. IPhone pickled truffaut sartorial, forage hammock polaroid authentic marfa gentrify.</span> <span>Semiotics pork belly mustache, schlitz next level ennui keytar. Etsy dreamcatcher single-origin coffee kinfolk meggings whatever. Polaroid sustainable try-hard cornhole quinoa.</span> <i class="close" ng-click="changeState()">×</i> </div> </div> </article> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-animate.js'></script> <script src="js/index.js"></script>
</body>
</html>
Material Card Expand Animation - Script Codes CSS Codes
div, header, footer, section, article, aside, button, img, a, dl, dt, dd, li, ul,
p, h1, h2, h3, h4, h5, h6 { box-sizing: border-box;
}
a { cursor: pointer;
}
select,
input,
label,
legend,
button,
textarea,
fieldset,
input[type=text],
input[type=password],
input[type=number],
input[type=search],
input[type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: none; min-width: 0;
}
input,
select,
button,
textarea { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; background: none;
}
input:active, input:focus,
select:active,
select:focus,
button:active,
button:focus,
textarea:active,
textarea:focus { outline: none;
}
textarea { resize: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { /* display: none */
}
input[type=number] { /* -moz-appearance: textfield */
}
input[type=search]::-webkit-search-cancel-button,
input[type=time]::-webkit-clear-button { /* appearance: none */
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { /* appearance: none */
}
button,
input[type="submit"],
input[type="reset"],
input[type='button'] { text-align: center; white-space: nowrap; text-decoration: none; text-transform: uppercase; display: inline-block; cursor: pointer; background-color: transparent;
}
button:hover, button:active, button:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type='button']:hover,
input[type='button']:active,
input[type='button']:focus { outline: 0;
}
a { text-decoration: none; outline: 0;
}
a:hover, a:focus { text-decoration: underline;
}
body { font-family: Roboto, sans-serif; font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%;
}
/* when a large primary title is present */
/* if there are additional actions or supporting text */
/* no actions or supporting text */
* { box-sizing: content-box;
}
html,
body { width: 100%; height: 100%;
}
button.control { position: absolute;
}
.card-wrap { width: 350px; position: relative; margin-left: auto; margin-right: auto; height: 100%;
}
.material-card { width: 100%; border-radius: 0.125em; display: block; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); background-color: #fff;
}
header { max-height: 4.5em; font-weight: 600; height: 4.5em; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
}
header .header-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
header .avatar { width: 2.5em; height: 2.5em; margin-right: 1em; display: block; border-radius: 2.5em; background: url(http://fillmurray.com/50/50) no-repeat center; background-size: cover;
}
header .title { color: #333333; font-size: 0.875em;
}
header .subtitle { color: #999999; font-size: 0.875em;
}
.media-area { padding-bottom: 56.25%; background: url(http://fillmurray.com/300/170) no-repeat left top; background-size: cover; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
}
.supporting-content { padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; max-height: 10em; overflow: hidden; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
}
.supporting-content span { color: #333333; font-size: 0.875em;
}
.actions { padding: 0.5em; position: relative; opacity: 1; -webkit-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
}
.btn-action { color: #333333; font-weight: 600; text-transform: uppercase; padding-top: 0.5em; padding-right: 0.5em; padding-bottom: 0.75em; padding-left: 0.5em; cursor: pointer;
}
.btn-action span { font-size: 0.875em;
}
.btn-action + button { margin-left: 0.5em;
}
.btn-action:hover { background-color: #eeeeee;
}
.details { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; color: #333333; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; z-index: -1; height: 0; overflow: hidden;
}
.details span { font-size: 0.875em;
}
.details img { width: 100%; margin: 1em 0;
}
.expandable { position: relative; width: 100%; height: 3.625em; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: margin 0.25s ease-in-out, -webkit-transform 0.5s ease-in-out; transition: margin 0.25s ease-in-out, -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, margin 0.25s ease-in-out; transition: transform 0.5s ease-in-out, margin 0.25s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
.close { position: absolute; top: 0; right: 0; cursor: pointer; font-size: 3em; line-height: 1em; margin-top: -0.1em; margin-right: 0.1em;
}
.page-wrap { height: 100%;
}
.state0 .supporting-content,
.state0 .media-area { display: block;
}
.state1 .supporting-content,
.state1 .media-area,
.state2 .supporting-content,
.state2 .media-area,
.state3 .supporting-content,
.state3 .media-area,
.state4 .supporting-content,
.state4 .media-area { padding-top: 0; padding-bottom: 0;
}
.state1 .supporting-content,
.state2 .supporting-content,
.state3 .supporting-content,
.state4 .supporting-content { max-height: 0;
}
.state1 .material-card,
.state2 .material-card,
.state3 .material-card,
.state4 .material-card { box-shadow: none;
}
.state1 header,
.state1 .expandable,
.state2 header,
.state2 .expandable,
.state3 header,
.state3 .expandable,
.state4 header,
.state4 .expandable { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.state1 .expandable,
.state2 .expandable,
.state3 .expandable,
.state4 .expandable { margin-top: 10px; -webkit-transform: scale(0.8); transform: scale(0.8);
}
.state1 .actions,
.state2 .actions,
.state3 .actions,
.state4 .actions { opacity: 0;
}
.state1 .details,
.state2 .details,
.state3 .details,
.state4 .details { height: 100%;
}
.state2 .material-card,
.state3 .material-card,
.state4 .material-card { height: 100%;
}
.state2 header,
.state3 header,
.state4 header { -webkit-transform: scale(0); transform: scale(0);
}
.state2 .expandable,
.state3 .expandable,
.state4 .expandable { -webkit-transition: all 0.2s ease-in-out, height 0.3s ease-out; transition: all 0.2s ease-in-out, height 0.3s ease-out; margin-top: 0;
}
.state2 .details,
.state3 .details,
.state4 .details { -webkit-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; z-index: auto; opacity: 1;
}
.state3 header { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
}
.state3 .expandable { -webkit-transform: scale(1); transform: scale(1); margin-top: 0; background-color: white; height: 100%;
}
Material Card Expand Animation - Script Codes JS Codes
var app = angular.module('myApp', []);
app.controller('uiCtrl', function($scope, $timeout) { var states = ['state0', 'state1', 'state2', 'state3'], initialState = 0, currentState = initialState, totalStates = states.length, finalState = totalStates - 1, timer; $scope.currentState = states[currentState]; function change() { if (currentState < finalState) { currentState++; $scope.currentState = states[currentState]; } else { currentState = initialState; $scope.currentState = states[currentState]; } if (currentState == finalState) { $timeout.cancel(timer); } } $scope.changeState = function() { change(); } $scope.autoState = function() { timer = $timeout($scope.autoState, 300); change(); }
});
Developer | Chris Sargent |
Username | ChrisSargent |
Uploaded | November 01, 2022 |
Rating | 3.5 |
Size | 6,717 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Grid Test - Flexbox | 3,238 Kb |
Angle Gradient | 1,937 Kb |
Checkbox Mobile Nav Toggle Test | 2,295 Kb |
Quick Angular | 2,835 Kb |
Flexbox Linebreaks V2 | 1,914 Kb |
Speech Bubble, Bg Image | 2,716 Kb |
A Pen by Chris Sargent | 1,483 Kb |
Angular Fixed Position Test | 2,341 Kb |
Cupboard Test | 1,822 Kb |
Angular Animation Done Call Back | 2,520 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Cool audio | Bigliam | 1,868 Kb |
Nice responsive team page | Infomiho | 3,139 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Wip elementary os navbar | Nickcolley | 2,993 Kb |
See Through | Larrygeams | 77,410 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!