欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
首先将我们已经用v-if控制显示与隐藏的盒子用
 
  <transition-group name="lyric"> </transition-group>标签包起来
 
name属性即为下面写样式的类名
 
<template>
 
<div>
 
<transition-group name="lyric">
 
//注意需要加入KEY值 否则报错
 
<div v-if="showDefaultAttr" :key="1">
 
</div>
 
</transition-group>
 
 <el-button @click="showDefaultAttr = !showDefaultAttr ">点击</el-button>
 
</div>
 
</template>
 
<script>
 
 data(){
 
    return{
 
    showDefaultAttr:false
 
        }
 
    }
 
</script>
 
然后再<style>中写上下面代码 
 
<style>
 
.lyric-enter,
 
  .lyric-leave-to {
 
  opacity: 0;
 
  transform: translateY(10px);
 
  }
 
  .lyric-enter-to,
 
  .lyric-leave {
 
  opacity: 1;
 
  }
 
  .lyric-enter-active,
 
  .lyric-leave-active {
 
  transition: all 0.5s;
 
  }
 
</style>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64219.shtml