Skip to content
This repository was archived by the owner on Aug 26, 2024. It is now read-only.

Commit 9054d67

Browse files
Edmund1645Edmund1645
committed
start adding animatinos
1 parent 2410319 commit 9054d67

15 files changed

+4089
-138
lines changed

‎.npmignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
demo/

‎demo/package-lock.json

+3,896
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
},
1010
"dependencies": {
1111
"core-js": "^3.6.4",
12-
"vue": "^2.6.11"
12+
"vue": "^2.6.11",
13+
"vue-transitions-css": "file:.."
1314
},
1415
"devDependencies": {
1516
"@vue/cli-plugin-babel": "^4.3.0",

‎demo/public/index.html

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
88
<title><%= htmlWebpackPlugin.options.title %></title>
9+
<meta
10+
name="description"
11+
content="A lightweight CSS library for adding transitions to Vue components"
12+
/>
913
</head>
1014
<body>
1115
<noscript>
12-
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
16+
<strong
17+
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
18+
properly without JavaScript enabled. Please enable it to
19+
continue.</strong
20+
>
1321
</noscript>
1422
<div id="app"></div>
1523
<!-- built files will be auto injected -->

‎demo/src/App.vue

+52-9
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,71 @@
11
<template>
22
<div id="app">
3-
<img alt="Vue logo" src="./assets/logo.png" />
4-
<HelloWorld msg="Welcome to Your Vue.js App" />
3+
<Nav />
4+
<div id="body">
5+
<div id="selector">
6+
<select name="animations" id="animations" v-model="selected">
7+
<option
8+
v-for="(animation, index) in animations"
9+
:key="index"
10+
:value="animation.class"
11+
>
12+
{{ animation.name }}
13+
</option>
14+
</select>
15+
<button @click="animate">toggle</button>
16+
</div>
17+
<div id="preview">
18+
<transition :name="selected">
19+
<Content v-if="show" />
20+
</transition>
21+
</div>
22+
</div>
523
</div>
624
</template>
725

826
<script>
9-
import HelloWorld from "./components/HelloWorld.vue";
10-
27+
import Nav from '@/components/Nav';
28+
import Content from '@/components/Content';
29+
import animations from '@/assets/animations.js';
1130
export default {
12-
name: "App",
31+
name: 'App',
1332
components: {
14-
HelloWorld
15-
}
33+
Nav,
34+
Content,
35+
},
36+
data() {
37+
return {
38+
selected: 'fade',
39+
show: true,
40+
animations: [],
41+
};
42+
},
43+
mounted() {
44+
this.animations = animations;
45+
},
46+
methods: {
47+
animate() {
48+
this.show = !this.show;
49+
},
50+
},
1651
};
1752
</script>
1853

1954
<style>
55+
* {
56+
margin: 0;
57+
padding: 0;
58+
box-sizing: border-box;
59+
}
2060
#app {
2161
font-family: Avenir, Helvetica, Arial, sans-serif;
2262
-webkit-font-smoothing: antialiased;
2363
-moz-osx-font-smoothing: grayscale;
24-
text-align: center;
2564
color: #2c3e50;
26-
margin-top: 60px;
65+
}
66+
#body {
67+
max-width: 700px;
68+
margin: auto;
69+
padding: 20px;
2770
}
2871
</style>

‎demo/src/assets/animations.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default [
2+
{
3+
name: 'Fade',
4+
class: 'fade',
5+
},
6+
{
7+
name: 'Shrink',
8+
class: 'shrink',
9+
},
10+
];

‎demo/src/components/Content.vue

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div>
3+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi iste harum
4+
animi quidem rem rerum laboriosam corporis dolore sit aut consequatur,
5+
deleniti numquam placeat eveniet laborum totam sunt sapiente modi enim quo.
6+
Minima, nesciunt natus amet perspiciatis incidunt ipsum veritatis qui ipsa
7+
sunt velit vel, dolores eos, necessitatibus laborum quia? Nisi, totam libero
8+
consequatur autem nobis ipsa provident neque cupiditate animi dolorem dolore
9+
perspiciatis ipsum nesciunt qui voluptas nam? Saepe?
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
name: 'DummyContent',
16+
};
17+
</script>
18+
19+
<style scoped></style>

‎demo/src/components/HelloWorld.vue

-114
This file was deleted.

‎demo/src/components/Nav.vue

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div id="navbar">
3+
<nav>
4+
<h1 class="title">Vue Transitions CSS</h1>
5+
6+
<ul class="links">
7+
<li>
8+
<a
9+
href="https://twitter.com/26th_edmund"
10+
target="_blank"
11+
rel="noopener"
12+
>
13+
Twitter
14+
</a>
15+
</li>
16+
<li>
17+
<a
18+
href="https://github.com/edmund1645"
19+
target="_blank"
20+
rel="noopener"
21+
>
22+
GitHub
23+
</a>
24+
</li>
25+
</ul>
26+
</nav>
27+
</div>
28+
</template>
29+
30+
<script>
31+
export default {
32+
name: 'NavigationBar',
33+
};
34+
</script>
35+
36+
<style scoped>
37+
#navbar nav {
38+
height: 60px;
39+
background-color: #44a1df;
40+
width: 100%;
41+
display: flex;
42+
justify-content: space-between;
43+
align-items: center;
44+
padding: 0 20px;
45+
}
46+
.title {
47+
display: inline-block;
48+
font-weight: 800;
49+
color: #ffffff;
50+
}
51+
.links {
52+
list-style: none;
53+
display: flex;
54+
}
55+
.links li {
56+
margin-right: 20px;
57+
}
58+
.links li a {
59+
color: #ffffff;
60+
}
61+
</style>

‎demo/src/main.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import Vue from "vue";
2-
import App from "./App.vue";
3-
1+
import Vue from 'vue';
2+
import App from './App.vue';
3+
import 'vue-transitions-css';
44
Vue.config.productionTip = false;
55

66
new Vue({
7-
render: h => h(App)
8-
}).$mount("#app");
7+
render: (h) => h(App),
8+
}).$mount('#app');

‎demo/vue.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
chainWebpack: (config) => {
3+
config.plugin('html').tap((args) => {
4+
args[0].title = 'Vue Transitions CSS';
5+
return args;
6+
});
7+
},
8+
};

‎dist/index.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"test": "echo \"Error: no test specified\" && exit 1",
88
"build": "gulp build",
99
"watch": "gulp watch",
10-
"develop": "cd demo && npm run serve"
10+
"develop": "cd demo && npm run serve",
11+
"deployment": "cd demo && npm run build"
1112
},
1213
"repository": {
1314
"type": "git",

‎src/fade.css

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1-
.fade {
2-
transform: translate(20px);
1+
/* fade animation */
2+
.fade-enter-active,
3+
.fade-leave-active {
4+
transition: opacity 0.3s;
5+
}
6+
7+
.fade-enter,
8+
.fade-leave-to {
9+
opacity: 0;
310
}

‎src/shrink.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* shrink animation */
2+
.shrink-enter,
3+
.shrink-leave-to {
4+
transform: scale(1.2);
5+
}
6+
7+
.shrink-enter-active,
8+
.shrink-leave-active {
9+
transition: transform 0.3s;
10+
}

0 commit comments

Comments
 (0)