vue+vux cell动态效果初探

屏幕快照 2018-03-15 上午11.49.45.png

<template>
  <div>
     <cell
      :title="('Title 002')"
      is-link
      :border-intent="false"
      :arrow-direction="showContent002 ? 'up' : 'down'"
      @click.native="showContent002 = !showContent002"></cell>

      <template v-if="showContent002">
        <cell-form-preview :border-intent="false" :list="list"></cell-form-preview>
      </template>
  </div>
</template>
<script>
import { Cell,  CellFormPreview } from 'vux'

export default {
  mounted () {
   
  },
  components: {

    Cell,
    CellFormPreview,
   
  },
  methods: {
    onClick () {
      console.log('on click')
    }
  },
  data () {
    return {
      list: [{
        label: 'Apple',
        value: '3.29'
      }, {
        label: 'Banana',
        value: '1.04'
      }, {
        label: 'Fish',
        value: '8.00'
      }],
      money: null, 
      showContent002: false,
    }
  }
}
</script>
<style lang="less" scoped>
  .sub-item {
  color: #888;
}
</style>

效果图二： 屏幕快照 2018-03-15 下午12.43.05.png

<template>
  <div class="zhengwen">
    <group >
      <cell
        :title="'动画'"
        is-link
        :border-intent="true"
        :arrow-direction="showContent004 ? 'up' : 'down'"
        @click.native="showContent004 = !showContent004"></cell>
        <p class="slide" :class="showContent004?'animate':''">blablabla...<br/>blablabla...<br/>blablabla...<br/>blablabla...</p>
    </group>
  </div>

</template>
<script>
import { Cell, CellBox, CellFormPreview, Group, Badge } from 'vux'

export default {
  name: 'ApprovalOpinion',
  data () {
    return {
      showContent004: false
    }
    },
  components: {
    Group,
    Cell,
    CellFormPreview,
    CellBox,
    Badge
  },
   methods: {
    
  },
 
}
</script>
<style lang="less" scoped>

.slide {
  padding: 0 20px;
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
}
.animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}
</style>