confirm-animation?

package.json

@@ -28,6 +28,7 @@
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.5",
     "fs-extra": "3.0.1",
+    "good-storage": "^1.0.1",
     "html-webpack-plugin": "2.29.0",
     "jest": "20.0.4",
     "js-base64": "^2.4.3",

src/base/confirm/confirm.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import Proptypes from 'prop-types'
+
+import { CSSTransition } from 'react-transition-group'
+
+import './confirm.styl'
+export default class Confrim extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      showFlag: false
+    }
+  }
+
+  static propTypes = {
+    text: Proptypes.string,
+    confirmBtnText: Proptypes.string,
+    cancelBtnText: Proptypes.string
+  }
+
+  static defaultProps = {
+    text: '',
+    cancelBtnText: '取消',
+    confirmBtnText: '确认'
+  }
+
+  show() {
+    this.setState({
+      showFlag: true
+    })
+  }
+
+  hide() {
+    this.setState({
+      showFlag: false
+    })
+  }
+
+  confirm() {
+    this.hide()
+    this.props.confirm()
+  }
+
+  cancel() {
+    this.hide()
+  }
+
+  render() {
+    return (
+      <CSSTransition
+        timeout={200}
+        classNames="confirm-fade"
+      >
+        <div className="confirm" style={{'display': this.state.showFlag ? 'block' : 'none'}}>
+          <div className="confirm-wrapper">
+            <div className="confirm-content">
+              <p className="text">{this.props.text}</p>
+              <div className="operate">
+                <div className="operate-btn left" onClick={() => this.cancel()}>{this.props.cancelBtnText}</div>
+                <div className="operate-btn" onClick={() => this.confirm()}>{this.props.confirmBtnText}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </CSSTransition>
+    )
+  }
+}

src/base/confirm/confirm.styl

@@ -0,0 +1,39 @@
+@import "~common/styl/variable.styl"
+
+.confirm
+  position fixed
+  left 0px
+  right 0px
+  top 0px
+  bottom 0px
+  z-index 990
+  background-color $color-background-d
+  .confirm-wrapper
+      position: absolute
+      top: 50%
+      left: 50%
+      transform: translate(-50%, -50%)
+      z-index: 999
+      .confirm-content
+        width: 270px
+        border-radius: 13px
+        background: $color-highlight-background
+        .text
+          padding: 19px 15px
+          line-height: 22px
+          text-align: center
+          font-size: $font-size-large
+          color: $color-text-l
+        .operate
+          display: flex
+          align-items: center
+          text-align: center
+          font-size: $font-size-large
+          .operate-btn
+            flex: 1
+            line-height: 22px
+            padding: 10px 0
+            border-top: 1px solid $color-background-d
+            color: $color-text-d
+            &.left
+              border-right: 1px solid $color-background-d

src/base/searchList/searchList.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import './searchList.styl'
+import Proptypes from 'prop-types'
+
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
+
+export default class SearchList extends React.Component{
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  static propTypes = {
+    searches: Proptypes.array
+  }
+
+  static defaultProps = {
+    searches: []
+  }
+
+  deleteOne(v, e) {
+    e.stopPropagation()
+    this.props.deleteOne(v)
+  }
+
+  render() {
+    return (
+      <div className="search-list">
+        <TransitionGroup>
+          {
+            this.props.searches.map((v, i) =>
+              <CSSTransition
+                key={v}
+                timeout={300}
+                classNames="list">
+                <li
+                onClick={() => this.props.selectItem(v)}
+                className="search-item">
+                  <span className="text">{v}</span>
+                  <span className="icon" onClick={(e) => this.deleteOne(v, e)}>
+                    <i className="icon-delete"></i>
+                  </span>
+                </li>
+              </CSSTransition>
+            )
+          }
+        </TransitionGroup>
+      </div>
+    )
+  }
+}

src/base/searchList/searchList.styl

@@ -0,0 +1,16 @@
+@import "~common/styl/variable"
+@import "~common/styl/mixin"
+.search-list
+  .search-item
+    display: flex
+    align-items: center
+    height: 40px
+    overflow: hidden
+    .text
+      flex: 1
+      color: $color-text-l
+    .icon
+      extend-click()
+      .icon-delete
+        font-size: $font-size-small
+        color: $color-text-d

src/common/js/cache.js

@@ -0,0 +1,52 @@
+import storage from 'good-storage'
+
+const SEARCH_KEY = '__search__'
+const SEARCH_MAX_LENGTH = 15
+
+
+export function saveSearch(query) {
+  let searches = storage.get(SEARCH_KEY, [])
+  insertArr(searches, query, (item) => {
+    return item === query
+  }, SEARCH_MAX_LENGTH)
+  storage.set(SEARCH_KEY, searches)
+  return searches
+}
+
+export function loadSearch() {
+  return storage.get(SEARCH_KEY, [])
+}
+
+export function deleteSearch(query) {
+  let searches = storage.get(SEARCH_KEY, [])
+  deleteFromArr(searches, (item) => {
+    return item === query
+  })
+  storage.set(SEARCH_KEY, searches)
+  return searches
+}
+
+export function clearSearch() {
+  storage.remove(SEARCH_KEY)
+  return []
+}
+
+
+function insertArr(arr, val, compare, maxLen) {
+  const index = arr.findIndex(compare)
+  if (index === 0) return
+  if (index > 0) {
+    arr.splice(index, 1)
+  }
+  arr.unshift(val)
+  if (maxLen && arr.length > maxLen) {
+    arr.pop()
+  }
+}
+
+function deleteFromArr(arr, compare) {
+  const index = arr.findIndex(compare)
+  if (index > -1) {
+    arr.splice(index, 1)
+  }
+}

src/common/styl/index.styl

@@ -6,15 +6,15 @@
 .fade-enter
   transform translate3d(100%, 0, 0)
   &.fade-enter-active
-    transition transform .3s ease-in
     transform translate3d(0, 0, 0)
+    transition transform .2s ease-in
 
 .fade-exit
   transform translate3d(0, 0, 0)
   &.fade-exit-active
     transform translate3d(100%, 0, 0)
-    transition transform .3s ease-in
-    
+    transition transform .2s ease-in
+
 .player
   .normal-player
     &.normal-enter
@@ -42,4 +42,40 @@
           transition: transform 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32)
         .bottom
           transform: translate3d(0, 100px, 0)
-          transition: transform 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32)
+          transition: transform 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32)
+
+.search-list
+  .search-item
+    // 动画初始位置
+    &.list-enter
+      height 0
+      // 动画进入位置
+      &.list-enter-active
+        height 40px
+        transition height 0.1s
+
+    &.list-exit
+      height 40px
+      &.list-exit-active
+        height 0
+        transition height 0.1s
+
+
+.confirm-fade-enter-active
+  animation confirm-fade-in 0.3s
+  .confirm-content
+    animation confirm-zoom 0.3s
+
+@keyframes confirm-fade-in
+  0%
+    opacity 0
+  100%
+    opacity 1
+
+@keyframes confirm-zoom
+  0%
+    transform scale(0)
+  50%
+    transform scale(1.1)
+  100%
+    transform scale(1)

src/components/recommend/recommend.js

@@ -63,13 +63,13 @@ class Recommend extends Component{
     this.refs.recommends.style.bottom = bottom
     this.refs.list.refresh()
   }
-  
+
 
   selectAlbum(v) {
     const {match} = this.props
     const url = `${match.url}/${v.dissid}`
-    this.props.setDisc(v)
     this.props.history.push(url)
+    this.props.setDisc(v)
   }
 
   render() {