Một Đoạn Hoạt ảnh SVG Đơn giản cho Thông báo Ứng dụng Thời tiết với Vue

Trình thông báo Thời tiết Vue

Xem trực tiếp: http://codepen.io/sdras/full/YNpaoJ

Ứng dụng Vue nhỏ này hiển thị một cách đơn giản cập nhật trạng thái bằng vuex cho các hoạt ảnh SVG. Các hoạt ảnh hoạt động cả trong thành phần <transition> và cũng trong mounted(), cho các chuyển động phức tạp hơn. Tôi đang sử dụng GreenSock Animation API và tách các định nghĩa (defs) vào tệp mẫu riêng của chúng.

Cài đặt dựng

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

.babelrc

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "plugins": [ "istanbul" ]
    }
  }
}

.editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

.gitignore

### OSX ###
*.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon
# Thumbnails
._*
# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent
# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk


### Node ###
# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules
jspm_packages

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

Chi tiết tải xuống:

Tác giả: sdras
Nguồn: https://github.com/sdras/vue-weather-notifier