├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    └── main.js
└── tailwind.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-fan-animation
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-fan-animation",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "tailwindcss": "^1.4.6",
13 |     "vue": "^2.6.11",
14 |     "vue-clickaway": "^2.2.2"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "~4.4.0",
18 |     "@vue/cli-plugin-eslint": "~4.4.0",
19 |     "@vue/cli-service": "~4.4.0",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^6.2.2",
23 |     "vue-template-compiler": "^2.6.11"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [
3 |     // ...
4 |     require('tailwindcss'),
5 |     require('autoprefixer'),
6 |     // ...
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drehimself/vue-fan-animation/448576050b69ed1392081ad24471e42fe1c9f07b/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <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">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bg-gray-300 text-gray-800 antialiased min-h-screen flex flex-col justify-end">
  3 |     <div v-on-clickaway="hideMenu" class="bg-gray-400 px-8 py-8 flex justify-center">
  4 |       <ul class="absolute -mt-32 space-y-2" style="bottom: 124px">
  5 |         <transition v-for="email in emails" :key="email.id" name="fade">
  6 |           <li v-show="visible" class="transform" :class="email.classes">
  7 |             <a href="#" class="bg-white hover:bg-gray-100 w-80 shadow-md border rounded-lg px-4 py-4 flex items-center">
  8 |               <img :src="email.image" alt="avatar" class="rounded-full w-10 h-10">
  9 |               <div class="ml-4">
 10 |                 <div class="font-semibold">{{ email.subject }}</div>
 11 |                 <div class="text-left text-gray-700">{{ email.sender }}</div>
 12 |               </div>
 13 |             </a>
 14 |           </li>
 15 |         </transition>
 16 |       </ul>
 17 |       <button @click="visible = !visible" class="bg-white hover:bg-gray-100 w-80 shadow-md border rounded-lg px-4 py-4 flex items-center -mt-16">
 18 |         <img src="https://s3.amazonaws.com/uifaces/faces/twitter/tanveerrao/128.jpg" alt="avatar" class="rounded-full w-10 h-10">
 19 |         <div class="ml-4">
 20 |           <div class="font-semibold">Hey Email Invite</div>
 21 |           <div class="text-left text-gray-700">Jason Fried</div>
 22 |         </div>
 23 |       </button>
 24 |     </div>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script>
 29 | import { mixin as clickaway } from 'vue-clickaway'
 30 | 
 31 | export default {
 32 |   mixins: [ clickaway ],
 33 |   name: 'App',
 34 |   data() {
 35 |     return {
 36 |       visible: false,
 37 |       emails: [
 38 |         {
 39 |           id: 1,
 40 |           subject: 'Basketball Camp',
 41 |           sender: 'Leanna Spencer',
 42 |           image: 'https://s3.amazonaws.com/uifaces/faces/twitter/ifarafonow/128.jpg',
 43 |           classes: 'translate-x-16 rotate-12',
 44 |         },
 45 |         {
 46 |           id: 2,
 47 |           subject: 'Guitar Lessons',
 48 |           sender: 'Odessa Bergnaum',
 49 |           image: 'https://s3.amazonaws.com/uifaces/faces/twitter/allagringaus/128.jpg',
 50 |           classes: 'translate-x-10 rotate-10',
 51 |         },
 52 |         {
 53 |           id: 3,
 54 |           subject: 'Laravel Course',
 55 |           sender: 'Rosalee Wisoky',
 56 |           image: 'https://s3.amazonaws.com/uifaces/faces/twitter/lowie/128.jpg',
 57 |           classes: 'translate-x-6 rotate-8',
 58 |         },
 59 |         {
 60 |           id: 4,
 61 |           subject: 'Latest News',
 62 |           sender: 'Chandler Borer',
 63 |           image: 'https://s3.amazonaws.com/uifaces/faces/twitter/emileboudeling/128.jpg',
 64 |           classes: 'translate-x-4 rotate-6',
 65 |         },
 66 |         {
 67 |           id: 5,
 68 |           subject: 'iMac 2020 Revealed',
 69 |           sender: 'Kaleb Bernhard',
 70 |           image: 'https://s3.amazonaws.com/uifaces/faces/twitter/chanpory/128.jpg',
 71 |           classes: 'translate-x-2 rotate-4',
 72 |         },
 73 |         {
 74 |           id: 6,
 75 |           subject: 'Vuact JS Framework',
 76 |           sender: 'William Christiansen',
 77 |           image: 'https://s3.amazonaws.com/uifaces/faces/twitter/alterchuca/128.jpg',
 78 |           classes: 'translate-x-1 rotate-2',
 79 |         },
 80 |       ]
 81 |     }
 82 |   },
 83 |   methods: {
 84 |     hideMenu() {
 85 |       this.visible = false
 86 |     }
 87 |   }
 88 | }
 89 | </script>
 90 | 
 91 | <style>
 92 |   .fade-enter-active, .fade-leave-active {
 93 |     transition: all .15s ease-in;
 94 |   }
 95 |   .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
 96 |     transform: translate(0px, 100px) rotate(0deg) !important;
 97 |     opacity: 0;
 98 |   }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drehimself/vue-fan-animation/448576050b69ed1392081ad24471e42fe1c9f07b/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String
38 |   }
39 | }
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped>
44 | h3 {
45 |   margin: 40px 0 0;
46 | }
47 | ul {
48 |   list-style-type: none;
49 |   padding: 0;
50 | }
51 | li {
52 |   display: inline-block;
53 |   margin: 0 10px;
54 | }
55 | a {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import 'tailwindcss/tailwind.css'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | new Vue({
 8 |   render: h => h(App),
 9 | }).$mount('#app')
10 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: [],
 3 |   theme: {
 4 |     extend: {
 5 |       spacing: {
 6 |         '80': '20rem'
 7 |       },
 8 |       rotate: {
 9 |         '2': '2deg',
10 |         '4': '4deg',
11 |         '6': '6deg',
12 |         '8': '8deg',
13 |         '10': '10deg',
14 |         '12': '12deg',
15 |       }
16 |     },
17 |   },
18 |   variants: {},
19 |   plugins: [],
20 | }
21 | 


--------------------------------------------------------------------------------