JSFiddle - React, Tailwind, and code Playground

by 静 轩

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>

<div id="app">
  <el-table :data="showData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180">
      </el-table-column>
      <el-table-column prop="name" label="Name" width="180">
      </el-table-column>
      <el-table-column prop="address" label="Address">
      </el-table-column>
    </el-table>
   <el-button type="success" size="small" class="btn-width" @click.prevent="onChangeData">Show More</el-button>
   
   <!-- CSS 过渡  -->
    <hr>
    <el-button type="success" size="small" class="btn-width"  @click="isShowYou = !isShowYou">
    Toggle render(1)
    </el-button>
    <transition name="slide-fade">
      <p v-if="isShowYou">你好</p>
    </transition>
    <hr>
    <el-button type="success" size="small" class="btn-width"  @click="isShowMe = !isShowMe">
    Toggle render(2)
    </el-button>
    <transition name="slide-fade">
      <p v-if="isShowMe">我好</p>
    </transition>
     <hr>
    <el-button type="success" size="small" class="btn-width"  @click="isShowUs = !isShowUs">
    Toggle render(3)
    </el-button>
    <transition name="slide-fade">
      <p v-if="isShowUs">大家好</p>
    </transition>
    
    <hr>
    <el-button type="success" size="small" class="btn-width"  @click="onTestClick"> 测试 </el-button>
</div>

CSS

@import url("//unpkg.com/element-ui/lib/theme-default/index.css");
.gap-space {
  margin: 15px auto;
}

.btn-width {
  width: 200px;
}

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-active {
  transform: translateX(10px);
  opacity: 0;
}

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: 'Jade',
        address: 'China'
      }, {
        date: '2016-05-04',
        name: 'Rayso',
        address: 'Cambridge'
      }, {
        date: '2016-05-01',
        name: 'Scarlett',
        address: 'New York'
      }, {
        date: '2016-05-01',	
        name: 'Scarlett',
        address: 'Shan Shan'
      }, {
        date: '2017-04-21',
        name: 'Scarlett',
        address: 'Han Dong'
      }],
      showData: [],
      offsetSize: 1,
      offsetIndex: 1,
      isShowMe: false,
      isShowYou: true,
      isShowUs: true
    }
  },
  created () {
  	this.showData = this.tableData.slice(0, this.offsetIndex * this.offsetSize)
  },
  methods: {
    onChangeData () {
    	this.offsetIndex++
    	this.showData = this.tableData.slice(0, this.offsetIndex * this.offsetSize)
    },
    onTestClick () {
    	this.isShowYou = !this.isShowYou
    	this.isShowMe = !this.isShowMe
      this.isShowUs = !this.isShowYou
    }
  }
});