|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<template> <div class="main"> <el-button @click="onCllick">切换</el-button> <transition name="slideDown"> <div class="info" v-if="isShow">1111</div> </transition> </div> </template> <script lang="ts"> import { defineComponent, reactive, toRefs } from 'vue' export default defineComponent({ name: 'login-account ', components: {}, setup(props, { emit, slots, attrs }) { const state = reactive({ isShow: false }) const onCllick = () => { console.log('切换') state.isShow = !state.isShow } return { ...toRefs(state), onCllick } } }) </script> <style lang="less"> .info { width: 100px; height: 400px; background-color: skyblue; margin: 0 auto; } .slideDown-enter-active, .slideDown-leave-active { transition: all 0.5s ease-in-out; } .slideDown-enter-from { height: 0; } .slideDown-leave-to { height: 0; } </style> |
