JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <el-dropdown @visible-change="handler">
    <p class="el-dropdown-link">
      下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
    </p>
    <transition slot="dropdown" name="fade">
      <ul v-show="visible">
        <li>黄金糕</li>
        <li>狮子头</li>
        <li>螺蛳粉</li>
        <li>双皮奶</li>
        <li>蚵仔煎</li>
      </ul>
    </transition>
  </el-dropdown>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

.fade-enter, .fade-leave-active {
  opacity: 0;
}

ul {
  transition: .3s;
}

Babel + JSX

new Vue({
  data() {
    return {
      visible: false
    }
  },
  methods: {
    handler(visible) {
      this.visible = visible
    }
  }
}).$mount('#app')