@mixin ballb($yaxis: 0) { transform: translate3d(0, $yaxis, 0); } @keyframes bouncein { 1% { @include ballb(-400px); } 20%, 40%, 60%, 80%, 95%, 99%, 100% { @include ballb() } 30% { @include ballb(-80px); } 50% { @include ballb(-40px); } 70% { @include ballb(-30px); } 90% { @include ballb(-15px); } 97% { @include ballb(-10px); } } .bouncein { animation: bouncein 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .ballmove-enter { @include ballb(-400px); }

<transition @leave="leaveDialog" :css="false"> <app-dialog v-if="showWeather"></app-dialog> </transition> <transition @leave="leaveDroparea" :css="false"> <g v-if="showWeather"> <app-droparea v-if="template == 1"></app-droparea> <app-windarea v-else-if="template == 2"></app-windarea> <app-rainbowarea v-else-if="template == 3"></app-rainbowarea> <app-tornadoarea v-else></app-tornadoarea> </g> </transition> <script> export const store = new Vuex.Store({ state: { showWeather: false, template: 0 }, mutations: { toggle: state => state.showWeather = !state.showWeather, updateTemplate: (state) => { state.showWeather = !state.showWeather; state.template = (state.template + 1) % 4; } } }); </script>

Vue.directive('tack', { bind(el, binding, vnode) { el.style.position = 'fixed' } });

Vue.directive('tack', { bind(el, binding, vnode) { el.style.position = 'fixed' el.style.top = binding.value + 'px' } });

Vue.directive('tack', { bind(el, binding, vnode) { el.style.position = 'fixed'; el.style.top = binding.value.top + 'px'; el.style.left = binding.value.left + 'px'; } });

new Vue({ el: '#app', methods: { handleScroll: function(evt, el) { if (window.scrollY > 50) { TweenMax.to(el, 1.5, { y: -10, opacity: 1, ease: Sine.easeOut }) } return window.scrollY > 100; } } });

export default { methods: { totalImpact: function(evt, el) { if (window.scrollY > 1100) { TweenMax.to(el, 0.75, { opacity: 0 }) let circ = d3.selectAll("circle") .attr("cx", function(d) { let lat = d["Longitude (Deg)"]; if (lat.includes("E")) { return midX - parseInt(lat) * incByW; } else { return midX + (parseInt(lat) * incByW); } }) ... .attr("r", 5) .attr("fill", "url(#radgrad)") } return window.scrollY > 1300; },

export default { transition: { mode: 'out-in', css: false, enter (el, done) { ... } ...

import Vuex from 'vuex' const createStore = () => { return new Vuex.Store({ state: { page: 'index' }, mutations: { updatePage(state, pageName) { state.page = pageName } } }) } export default createStore

export default function(context) { // go tell the store to update the page context.store.commit('updatePage', context.route.name) }

module.exports = { ... router: { middleware: 'pages' }, ... }

const JSDOM = jsdom.DOM const dom = new JSDOM() global.document = dom.window.document