| // { "framework": "Vue" } |
| |
| /******/ (function(modules) { // webpackBootstrap |
| /******/ // The module cache |
| /******/ var installedModules = {}; |
| |
| /******/ // The require function |
| /******/ function __webpack_require__(moduleId) { |
| |
| /******/ // Check if module is in cache |
| /******/ if(installedModules[moduleId]) |
| /******/ return installedModules[moduleId].exports; |
| |
| /******/ // Create a new module (and put it into the cache) |
| /******/ var module = installedModules[moduleId] = { |
| /******/ exports: {}, |
| /******/ id: moduleId, |
| /******/ loaded: false |
| /******/ }; |
| |
| /******/ // Execute the module function |
| /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); |
| |
| /******/ // Flag the module as loaded |
| /******/ module.loaded = true; |
| |
| /******/ // Return the exports of the module |
| /******/ return module.exports; |
| /******/ } |
| |
| |
| /******/ // expose the modules object (__webpack_modules__) |
| /******/ __webpack_require__.m = modules; |
| |
| /******/ // expose the module cache |
| /******/ __webpack_require__.c = installedModules; |
| |
| /******/ // __webpack_public_path__ |
| /******/ __webpack_require__.p = ""; |
| |
| /******/ // Load entry module and return exports |
| /******/ return __webpack_require__(0); |
| /******/ }) |
| /************************************************************************/ |
| /******/ ({ |
| |
| /***/ 0: |
| /***/ (function(module, exports, __webpack_require__) { |
| |
| var __vue_exports__, __vue_options__ |
| var __vue_styles__ = [] |
| |
| /* styles */ |
| __vue_styles__.push(__webpack_require__(283) |
| ) |
| |
| /* script */ |
| __vue_exports__ = __webpack_require__(284) |
| |
| /* template */ |
| var __vue_template__ = __webpack_require__(285) |
| __vue_options__ = __vue_exports__ = __vue_exports__ || {} |
| if ( |
| typeof __vue_exports__.default === "object" || |
| typeof __vue_exports__.default === "function" |
| ) { |
| if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")} |
| __vue_options__ = __vue_exports__ = __vue_exports__.default |
| } |
| if (typeof __vue_options__ === "function") { |
| __vue_options__ = __vue_options__.options |
| } |
| __vue_options__.__file = "/Users/Hanks/Codes/work/incubator-weex/examples/vue/transition.vue" |
| __vue_options__.render = __vue_template__.render |
| __vue_options__.staticRenderFns = __vue_template__.staticRenderFns |
| __vue_options__._scopeId = "data-v-1de2b95d" |
| __vue_options__.style = __vue_options__.style || {} |
| __vue_styles__.forEach(function (module) { |
| for (var name in module) { |
| __vue_options__.style[name] = module[name] |
| } |
| }) |
| if (typeof __register_static_styles__ === "function") { |
| __register_static_styles__(__vue_options__._scopeId, __vue_styles__) |
| } |
| |
| module.exports = __vue_exports__ |
| module.exports.el = 'true' |
| new Vue(module.exports) |
| |
| |
| /***/ }), |
| |
| /***/ 283: |
| /***/ (function(module, exports) { |
| |
| module.exports = { |
| "panel": { |
| "marginTop": 10, |
| "marginRight": 10, |
| "marginBottom": 10, |
| "marginLeft": 10, |
| "top": 10, |
| "alignItems": "center", |
| "justifyContent": "center", |
| "border": "solid", |
| "borderRadius": 10, |
| "transitionProperty": "right,left,top,bottom,width,height,backgroundColor,opacity,transform", |
| "transitionDuration": 500, |
| "transitionDelay": 0, |
| "transitionTimingFunction": "cubic-bezier(0.58,0.1,0.42,1)" |
| }, |
| "@TRANSITION": { |
| "panel": { |
| "property": "right,left,top,bottom,width,height,backgroundColor,opacity,transform", |
| "duration": 500, |
| "delay": 0, |
| "timingFunction": "cubic-bezier(0.58,0.1,0.42,1)" |
| } |
| }, |
| "cell": { |
| "backgroundColor": "#FFFFFF", |
| "flexDirection": "row" |
| }, |
| "text": { |
| "fontSize": 60, |
| "textAlign": "center", |
| "color": "#FFFFFF" |
| }, |
| "list": { |
| "backgroundColor": "#FFFFFF" |
| } |
| } |
| |
| /***/ }), |
| |
| /***/ 284: |
| /***/ (function(module, exports) { |
| |
| 'use strict'; |
| |
| Object.defineProperty(exports, "__esModule", { |
| value: true |
| }); |
| // |
| // |
| // |
| // |
| // |
| // |
| // |
| // |
| // |
| // |
| // |
| // |
| |
| exports.default = { |
| created: function created() { |
| this.datasource = ['width+height', 'backgroundColor', 'opactity', 'transform/translateX', 'transform/translateY', 'transform/scaleX', 'transform/scaleY', 'transform/rotate']; |
| this.panels = this.randomfn(); |
| }, |
| data: function data() { |
| return { |
| panels: [] |
| }; |
| }, |
| |
| methods: { |
| change: function change(i) { |
| var item = this.panels[i]; |
| if (item) { |
| |
| if (i == 0) { |
| item.height = item.height === 330 ? 200 : 330; |
| item.width = item.width === 350 ? 730 : 350; |
| } |
| if (i == 1) { |
| item.bgc = item.bgc === '#69BE96' ? 'red' : '#69BE96'; |
| } |
| if (i == 2) { |
| item.opacity = item.opacity === 1.0 ? 0.6 : 1.0; |
| } |
| if (i == 3) { |
| item.bgc = item.bgc === '#69BE96' ? '#72B8DF' : '#69BE96'; |
| item.transform = item.transform === 'translateX(200px)' ? 'translateX(0px)' : 'translateX(200px)'; |
| } |
| if (i == 4) { |
| item.bgc = item.bgc === '#69BE96' ? '#72B8DF' : '#69BE96'; |
| item.transform = item.transform === 'translateY(-150px)' ? 'translateY(0px)' : 'translateY(-150px)'; |
| } |
| if (i == 5) { |
| item.bgc = item.bgc === '#69BE96' ? '#72B8DF' : '#69BE96'; |
| item.transform = item.transform === 'scaleX(0.5)' ? 'scaleX(1)' : 'scaleX(0.5)'; |
| } |
| if (i == 6) { |
| item.bgc = item.bgc === '#69BE96' ? '#72B8DF' : '#69BE96'; |
| item.transform = item.transform === 'scaleY(0.5)' ? 'scaleY(1)' : 'scaleY(0.5)'; |
| } |
| if (i == 7) { |
| item.bgc = item.bgc === '#69BE96' ? '#72B8DF' : '#69BE96'; |
| item.transform = item.transform === 'rotate(40deg)' ? 'rotate(0deg)' : 'rotate(40deg)'; |
| } |
| } |
| }, |
| randomfn: function randomfn() { |
| var ary = []; |
| for (var i = 0; i <= 7; i++) { |
| ary.push({ label: this.datasource[i], height: 200, width: 730, bgc: '#69BE96', opacity: 1, right: 20 }); |
| } |
| return ary; |
| } |
| } |
| }; |
| |
| /***/ }), |
| |
| /***/ 285: |
| /***/ (function(module, exports) { |
| |
| module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h; |
| return _c('list', { |
| staticClass: ["list"] |
| }, _vm._l((_vm.panels), function(item, i) { |
| return _c('cell', { |
| staticClass: ["cell"], |
| appendAsTree: true, |
| attrs: { |
| "append": "tree" |
| }, |
| on: { |
| "click": function($event) { |
| _vm.change(i) |
| } |
| } |
| }, [_c('div', { |
| staticClass: ["panel"], |
| style: { |
| height: item.height, |
| width: item.width, |
| backgroundColor: item.bgc, |
| opacity: item.opacity, |
| transform: item.transform |
| } |
| }, [_c('text', { |
| staticClass: ["text"] |
| }, [_vm._v(_vm._s(item.label))])]), _c('div', { |
| staticClass: ["panel"], |
| style: { |
| height: item.height, |
| width: item.width, |
| backgroundColor: item.bgc, |
| opacity: item.opacity, |
| transform: item.transform |
| } |
| }, [_c('text', { |
| staticClass: ["text"] |
| }, [_vm._v(_vm._s(item.label))])])]) |
| })) |
| },staticRenderFns: []} |
| module.exports.render._withStripped = true |
| |
| /***/ }) |
| |
| /******/ }); |
