├── .babelrc ├── .gitignore ├── README.md ├── _config.yml ├── dist └── css │ └── vue-transition.css ├── docs ├── bundle.js ├── index.html ├── style.css └── vue-transition.css ├── gulpfile.js ├── lib └── update-docs.js ├── package.json └── src ├── bundle.js ├── main.js ├── pages ├── app.vue ├── list.vue ├── modal.vue ├── panel.vue └── pattern.vue ├── sass ├── fade.scss ├── jump.scss ├── modal.scss ├── scale.scss └── slide.scss └── vue-transition.css /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .package-lock.json 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-transition-css 2 | 3 | ## Usage 4 | include "vue-transition.css" your page 5 | `` 6 | 7 | ``` 8 | 9 |

Hello World!

10 | 11 | ``` 12 | 13 | 14 | ## transition pattern 15 | - jump 16 | - fade 17 | - slideLeft 18 | - slideRight 19 | - scaleUp 20 | - scaleDown 21 | 22 | 23 | ## click link if you want to see Demo 24 | https://komayuki.github.io/vue-transition-css/ 25 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /dist/css/vue-transition.css: -------------------------------------------------------------------------------- 1 | .fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-active,.fade-leave-to{opacity:0}.jump-enter-active{animation:jump .2s}.jump-leave-active{animation:jump .2s reverse}@keyframes jump{0%{transform:translateY(10px)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}.long-form-enter-active{transition:all .2s ease}.long-form-leave-active{transition:all .5s cubic-bezier(1,.5,.8,1)}.long-form-enter,.long-form-leave-to{border-right:solid 1px #ddd!important;opacity:0;transform:scaleX(0)}.scale-up-enter-active{animation:scaleUp .2s}.scale-up-leave-active{animation:scaleUp .2s reverse}@keyframes scaleUp{0%{transform:scale3D(1,1,1)}50%{transform:scale3D(1.2,1.2,1.2)}100%{transform:scale3D(1,1,1)}}.scale-down-enter-active{animation:scaleDown .2s}.scale-down-leave-active{animation:scaleDown .2s reverse}@keyframes scaleDown{0%{transform:scale3D(1.2,1.2,1.2)}50%{transform:scale3D(.8,.8,.8)}100%{transform:scale3D(1,1,1)}}.slide-left-enter-active{animation:slideLeft .2s}.slide-left-leave-active{animation:slideLeft .2s reverse}@keyframes slideLeft{0%{transform:translate3d(30px,0,0)}70%{transform:translate3d(-5px,0,0)}100%{transform:translate3d(0,0,0)}}.slide-right-enter-active{animation:slideRight .2s}.slide-right-leave-active{animation:slideRight .2s reverse}@keyframes slideRight{0%{transform:translate3d(-30px,0,0)}70%{transform:translate3d(5px,0,0)}100%{transform:translate3d(0,0,0)}} -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

10 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /docs/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body{ 3 | padding: 0; 4 | margin: 0; 5 | } 6 | *{ 7 | box-sizing: border-box; 8 | } 9 | a{ 10 | color: #42b983; 11 | } 12 | .container{ 13 | width: 800px; 14 | margin: 0 auto; 15 | } 16 | footer{ 17 | text-align: center; 18 | padding: 16px; 19 | } 20 | .footer_in{ 21 | } 22 | -------------------------------------------------------------------------------- /docs/vue-transition.css: -------------------------------------------------------------------------------- 1 | .fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-active,.fade-leave-to{opacity:0}.jump-enter-active{animation:jump .2s}.jump-leave-active{animation:jump .2s reverse}@keyframes jump{0%{transform:translateY(10px)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}.long-form-enter-active{transition:all .2s ease}.long-form-leave-active{transition:all .5s cubic-bezier(1,.5,.8,1)}.long-form-enter,.long-form-leave-to{border-right:solid 1px #ddd!important;opacity:0;transform:scaleX(0)}.scale-up-enter-active{animation:scaleUp .2s}.scale-up-leave-active{animation:scaleUp .2s reverse}@keyframes scaleUp{0%{transform:scale3D(1,1,1)}50%{transform:scale3D(1.2,1.2,1.2)}100%{transform:scale3D(1,1,1)}}.scale-down-enter-active{animation:scaleDown .2s}.scale-down-leave-active{animation:scaleDown .2s reverse}@keyframes scaleDown{0%{transform:scale3D(1.2,1.2,1.2)}50%{transform:scale3D(.8,.8,.8)}100%{transform:scale3D(1,1,1)}}.slide-left-enter-active{animation:slideLeft .2s}.slide-left-leave-active{animation:slideLeft .2s reverse}@keyframes slideLeft{0%{transform:translate3d(30px,0,0)}70%{transform:translate3d(-5px,0,0)}100%{transform:translate3d(0,0,0)}}.slide-right-enter-active{animation:slideRight .2s}.slide-right-leave-active{animation:slideRight .2s reverse}@keyframes slideRight{0%{transform:translate3d(-30px,0,0)}70%{transform:translate3d(5px,0,0)}100%{transform:translate3d(0,0,0)}} -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var gulp = require('gulp'); 3 | var watch = require('gulp-watch'); 4 | var sass = require('gulp-sass'); 5 | var cleanCss = require('gulp-clean-css'); 6 | var concatCss = require('gulp-concat-css'); 7 | var exec = require('gulp-exec'); 8 | 9 | gulp.task('default', ['sass', 'update-docs'], () => { 10 | }); 11 | 12 | //sass compile 13 | gulp.task('sass' , function () { 14 | return gulp.src('./src/sass/*.scss') 15 | .pipe(concatCss('vue-transition.css')) 16 | .pipe(sass()) 17 | .pipe(cleanCss()) 18 | .pipe(gulp.dest('./dist/css')); 19 | }) 20 | 21 | //copy dist css 22 | gulp.task('update-docs', () => { 23 | return gulp.src('./dist/css/vue-transition.css') 24 | .pipe(exec('node lib/update-docs.js')) 25 | }) 26 | 27 | gulp.task('sass:watch', () => { 28 | gulp.watch('./src/sass/*.scss', ['sass']); 29 | gulp.watch('./dist/css/vue-transition.css', ['update-docs']) 30 | }); 31 | -------------------------------------------------------------------------------- /lib/update-docs.js: -------------------------------------------------------------------------------- 1 | 2 | const fs = require('fs'); 3 | fs.createReadStream('dist/css/vue-transition.css') 4 | .pipe(fs.createWriteStream('docs/vue-transition.css')); 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-transition-css", 3 | "version": "1.0.5", 4 | "description": "css file for vuejs transition", 5 | "main": "index.js", 6 | "keywords": [ 7 | "Vuejs", 8 | "CSS", 9 | "transition", 10 | "animation" 11 | ], 12 | "scripts": { 13 | "test": "echo \"Error: no test specified\" && exit 1", 14 | "update-docs": "node lib/update-docs.js", 15 | "build": "browserify -e src/main.js -o docs/bundle.js", 16 | "watch": "watchify -p [ browserify-hmr -m fs ] src/main.js -o docs/bundle.js", 17 | "start": "http-server docs" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/komayuki/vue-transition-css.git" 22 | }, 23 | "author": "Masayuki Komatsu", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/komayuki/vue-transition-css/issues" 27 | }, 28 | "homepage": "https://github.com/komayuki/vue-transition-css#readme", 29 | "devDependencies": { 30 | "babel": "^6.23.0", 31 | "babel-core": "^6.24.1", 32 | "babel-preset-es2015": "^6.24.1", 33 | "babelify": "^7.3.0", 34 | "browserify": "^14.3.0", 35 | "fs-extra": "^3.0.1", 36 | "gulp": "^3.9.1", 37 | "gulp-browserify": "^0.5.1", 38 | "gulp-clean-css": "^3.4.0", 39 | "gulp-cli": "^1.3.0", 40 | "gulp-concat-css": "^2.3.0", 41 | "gulp-exec": "^2.1.3", 42 | "gulp-minify-css": "^1.2.4", 43 | "gulp-sass": "^3.1.0", 44 | "gulp-watch": "^4.3.11", 45 | "http-server": "^0.10.0", 46 | "lodash": "^4.17.4", 47 | "node-fs-extra": "^0.8.2", 48 | "vue": "^2.3.3", 49 | "vue-router": "^2.5.3", 50 | "vueify": "^9.4.1", 51 | "watchify": "^3.9.0" 52 | }, 53 | "browserify": { 54 | "transform": [ 55 | "vueify", 56 | "babelify" 57 | ] 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import App from './pages/app.vue' 4 | import Pattern from './pages/pattern.vue' 5 | import List from './pages/list.vue' 6 | import Modal from './pages/modal.vue' 7 | 8 | Vue.use(VueRouter) 9 | 10 | const routes = [ 11 | { path: '/', component: Pattern }, 12 | { path: '/list', component: List }, 13 | { path: '/modal', component: Modal }, 14 | ] 15 | 16 | const router = new VueRouter({routes}) 17 | 18 | var app = new Vue({ 19 | el: '#app', 20 | router, 21 | render (h) { 22 | return h(App) 23 | } 24 | }) 25 | -------------------------------------------------------------------------------- /src/pages/app.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 21 | 22 | 46 | -------------------------------------------------------------------------------- /src/pages/list.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 96 | 97 | 162 | -------------------------------------------------------------------------------- /src/pages/modal.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 32 | 33 | 48 | -------------------------------------------------------------------------------- /src/pages/panel.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/komayuki/vue-transition-css/d2b8d72c86d630d711299d8e465b0b3f4a1ca90a/src/pages/panel.vue -------------------------------------------------------------------------------- /src/pages/pattern.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 39 | 44 | -------------------------------------------------------------------------------- /src/sass/fade.scss: -------------------------------------------------------------------------------- 1 | .fade-enter-active, 2 | .fade-leave-active { 3 | transition: opacity .3s 4 | } 5 | .fade-enter, 6 | .fade-leave-to, 7 | .fade-leave-active{ 8 | opacity: 0 9 | } 10 | -------------------------------------------------------------------------------- /src/sass/jump.scss: -------------------------------------------------------------------------------- 1 | .jump-enter-active { 2 | animation: jump .2s; 3 | } 4 | .jump-leave-active { 5 | animation: jump .2s reverse; 6 | } 7 | @keyframes jump { 8 | 0% { 9 | transform: translateY(10px); 10 | } 11 | 50% { 12 | transform: translateY(-10px); 13 | } 14 | 100% { 15 | transform: translateY(0px); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/sass/modal.scss: -------------------------------------------------------------------------------- 1 | .long-form-enter-active { 2 | transition: all .2s ease; 3 | } 4 | .long-form-leave-active { 5 | transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0); 6 | } 7 | .long-form-enter, .long-form-leave-to{ 8 | border-right: solid 1px #ddd !important; 9 | opacity: 0; 10 | transform: scaleX(0px); 11 | } 12 | -------------------------------------------------------------------------------- /src/sass/scale.scss: -------------------------------------------------------------------------------- 1 | .scale-up-enter-active { 2 | animation: scaleUp .2s; 3 | } 4 | .scale-up-leave-active { 5 | animation: scaleUp .2s reverse; 6 | } 7 | @keyframes scaleUp { 8 | 0% { 9 | transform: scale3D(1, 1, 1); 10 | } 11 | 50% { 12 | transform: scale3D(1.2, 1.2, 1.2); 13 | } 14 | 100% { 15 | transform: scale3D(1, 1, 1); 16 | } 17 | 18 | } 19 | .scale-down-enter-active { 20 | animation: scaleDown .2s; 21 | } 22 | .scale-down-leave-active { 23 | animation: scaleDown .2s reverse; 24 | } 25 | @keyframes scaleDown { 26 | 0% { 27 | transform: scale3D(1.2, 1.2, 1.2); 28 | } 29 | 50% { 30 | transform: scale3D(0.8, 0.8, 0.8); 31 | } 32 | 100% { 33 | transform: scale3D(1, 1, 1); 34 | } 35 | 36 | } 37 | -------------------------------------------------------------------------------- /src/sass/slide.scss: -------------------------------------------------------------------------------- 1 | .slide-left-enter-active{ 2 | animation: slideLeft .2s; 3 | } 4 | .slide-left-leave-active { 5 | animation: slideLeft .2s reverse; 6 | } 7 | @keyframes slideLeft { 8 | 9 | 0% { 10 | transform: translate3d(30px, 0, 0); 11 | } 12 | 70% { 13 | transform: translate3d(-5px, 0, 0); 14 | } 15 | 100% { 16 | transform: translate3d(0px, 0, 0); 17 | } 18 | } 19 | 20 | .slide-right-enter-active{ 21 | animation: slideRight .2s; 22 | } 23 | .slide-right-leave-active { 24 | animation: slideRight .2s reverse; 25 | } 26 | @keyframes slideRight { 27 | 28 | 0% { 29 | transform: translate3d(-30px, 0, 0); 30 | } 31 | 70% { 32 | transform: translate3d(5px, 0, 0); 33 | } 34 | 100% { 35 | transform: translate3d(0px, 0, 0); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/vue-transition.css: -------------------------------------------------------------------------------- 1 | .fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-active,.fade-leave-to{opacity:0}.jump-enter-active{animation:jump .2s}.jump-leave-active{animation:jump .2s reverse}@keyframes jump{0%{transform:translateY(10px)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}.slide-fade-leave-active,.slide-left-enter-active{transition:all .3s ease}.slide-left-enter{transform:translateX(10px)}.slide-left-leave,.slide-left-leave-to{transform:translateX(10px)} --------------------------------------------------------------------------------

5 | vue-transition-css 6 |

Transition Name

Type

Preview

Modal

Demo