javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Transition stuff

Browse Source
This commit is contained in:
Max Lynch
2015-03-18 12:44:53 -05:00
parent 1a07726dc4
commit cb7aa9e27d
6 changed files with 76 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
gulpfile.js
View File

@ -17,6 +17,7 @@ var config = {
src: {
js: ['src/**/*.js', '!src/**/*.spec.js'],
html: 'src/**/*.html',
scss: 'src/**/*.scss',
playgroundJs: 'playground/**/*.js',
playgroundFiles: ['playground/**/*', '!playground/**/*.js'],
},
@ -29,7 +30,7 @@ var config = {
]
};
gulp.task('default', ['js', 'html', 'libs', 'playgroundJs', 'playgroundFiles']);
gulp.task('default', ['js', 'html', 'sass', 'libs', 'playgroundJs', 'playgroundFiles']);
gulp.task('watch', ['default'], function () {
var http = require('http');
@ -40,6 +41,7 @@ gulp.task('watch', ['default'], function () {
gulp.watch(config.src.html, ['html']);
gulp.watch(config.src.js, ['js']);
gulp.watch(config.src.sass, ['sass']);
gulp.watch(config.src.playgroundJs, ['playgroundJs']);
gulp.watch(config.src.playgroundFiles, ['playgroundFiles']);

4
playground/basic-example/index.html
View File

@ -8,6 +8,10 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/ionic.css" />
<!-- ES6-related imports -->
<script src="/lib/traceur-runtime.js"></script>
<script src="/lib/es6-module-loader-sans-promises.src.js"></script>

2
playground/basic-example/main.html
View File

@ -1,3 +1,5 @@
<ion-tabbar view-title="My Tabs"></ion-tabbar>
<ion-tabbar view-title="Tabs 2"></ion-tabbar>
<ion-tabbar view-title="Tabs 4"></ion-tabbar>
<ion-modal>
</ion-modal>

3
playground/basic-example/main.js
View File

@ -1,6 +1,7 @@
import {bootstrap} from 'angular2/core';
import {Component, Template} from 'angular2/angular2';
import {Tabbar} from 'ionic/components/tabbar/tabbar';
import {Modal} from 'ionic/components/modal/modal';
// import {Hammer} from 'hammerjs';
import 'ionic/components/tabbar/mixins/android/android-tabbar';
@ -8,7 +9,7 @@ import 'ionic/components/tabbar/mixins/android/android-tabbar';
@Component({ selector: '[playground-main]' })
@Template({
url: 'main.html',
directives: [Tabbar]
directives: [Tabbar, Modal]
})
class PlaygroundMain {
constructor() {

4
src/core/styles/ionic.scss
View File

@ -3,7 +3,8 @@
// Mixins
@import
"mixins/flex";
"mixins/flex",
"mixins/transition";
// Globals
@ -17,4 +18,5 @@
@import "components";
@import "../../components/button/button";
@import "../../components/tabbar/tabbar";
@import "../../components/modal/modal";

62
src/core/styles/mixins/_transition.scss Normal file
View File

@ -0,0 +1,62 @@
// Transition Mixins
// --------------------------------------------------
@mixin transition($transition...) {
-webkit-transition: $transition;
transition: $transition;
}
@mixin transition-delay($transition-delay) {
-webkit-transition-delay: $transition-delay;
transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration) {
-webkit-transition-duration: $transition-duration;
transition-duration: $transition-duration;
}
@mixin transition-timing-function($transition-timing) {
-webkit-transition-timing-function: $transition-timing;
transition-timing-function: $transition-timing;
}
@mixin transition-property($property) {
-webkit-transition-property: $property;
transition-property: $property;
}
@mixin transition-transform($properties...) {
// special case cuz of transform vendor prefixes
-webkit-transition: -webkit-transform $properties;
transition: transform $properties;
}
// Animation Mixins
// --------------------------------------------------
@mixin animation($animation) {
-webkit-animation: $animation;
animation: $animation;
}
@mixin animation-duration($duration) {
-webkit-animation-duration: $duration;
animation-duration: $duration;
}
@mixin animation-direction($direction) {
-webkit-animation-direction: $direction;
animation-direction: $direction;
}
@mixin animation-timing-function($animation-timing) {
-webkit-animation-timing-function: $animation-timing;
animation-timing-function: $animation-timing;
}
@mixin animation-fill-mode($fill-mode) {
-webkit-animation-fill-mode: $fill-mode;
animation-fill-mode: $fill-mode;
}
@mixin animation-name($name...) {
-webkit-animation-name: $name;
animation-name: $name;
}
@mixin animation-iteration-count($count) {
-webkit-animation-iteration-count: $count;
animation-iteration-count: $count;
}