javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

updated modal animation speed and reduced opacity

Browse Source
This commit is contained in:
Ben Sperry
2013-10-06 17:42:43 -05:00
parent 8b6b7aecbe
commit c78fc6cbe6
4 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
dist/ionic-ios7.css vendored
View File

@ -2305,11 +2305,11 @@ a.button {
padding: 10px; }
.slide-in-up {
opacity: 0;
opacity: 0.5;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
transition: -webkit-transform 0.25s, opacity 0.25s;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
transition: -webkit-transform 0.3s, opacity 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-webkit-animation-fill-mode: forwards; }
@ -2321,7 +2321,7 @@ a.button {
@keyframes fadein {
from {
opacity: 0; }
opacity: 0.7; }
to {
opacity: 1; } }

8
dist/ionic.css vendored
View File

@ -2387,11 +2387,11 @@ a.button {
padding: 10px; }
.slide-in-up {
opacity: 0;
opacity: 0.5;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
transition: -webkit-transform 0.25s, opacity 0.25s;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
transition: -webkit-transform 0.3s, opacity 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-webkit-animation-fill-mode: forwards; }
@ -2403,7 +2403,7 @@ a.button {
@keyframes fadein {
from {
opacity: 0; }
opacity: 0.7; }
to {
opacity: 1; } }

8
scss/ionic/_animations.scss
View File

@ -2,13 +2,13 @@ $bezier-function: cubic-bezier(.1, .7, .1, 1);
.slide-in-up {
// Start hidden
opacity: 0;
opacity: 0.5;
// Start it down low
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
transition: -webkit-transform 0.25s, opacity 0.25s;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
transition: -webkit-transform 0.3s, opacity 0.2s;
-webkit-transition-timing-function: $bezier-function;
transition-timing-function: $bezier-function;
@ -23,7 +23,7 @@ $bezier-function: cubic-bezier(.1, .7, .1, 1);
}
@keyframes fadein {
from { opacity:0; }
from { opacity:0.7; }
to { opacity:1; }
}
@-webkit-keyframes fadein { /* Safari and Chrome */

4
test/modals.html
View File

@ -24,14 +24,14 @@
</section>
<div id="modal" class="modal slide-in-up">
<header class="bar bar-header bar-success">
<header class="bar bar-header bar-secondary">
<h1 class="title">BOOM</h1>
<a href="#" class="button" id="modal-closer">Close</a>
</header>
<main class="content padded has-header">
<h2>I'm a thing</h2>
<div style="background-color: red; width: 100%; height: 1000px"></div>
<div style="background-color: blue; width: 100%; height: 1000px"></div>
</main>
</div>