vue中transition之slide效果
//在vue中的slide的效果可以使用自带的transition实现，下面是样式的部分代码。Document.expand-enter-active { transition: all 3s ease; height: 50px; overflow: hidden;}.expand-leave-active{ transition: a
//在vue中的slide的效果可以使用自带的transition实现，下面是样式的部分代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='https://unpkg.com/vue'></script>
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
<style>
.expand-enter-active {
transition: all 3s ease;
height: 50px;
overflow: hidden;
}
.expand-leave-active{
transition: all 3s ease;
height: 0px;
overflow: hidden;
}
.expand-enter, .expand-leave {
height: 0;
opacity: 0;
}
*{margin: 0;padding: 0;}
</style>
</head>
<body>
<div id="demo">
<button @click="show = !show">点击我</button>
<transition name="expand">
<div v-if="show">
hello
<span>hello</span>
<br>
<span>hello</span>
</div>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: false,
}
})
</script>
</body>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献7条内容
所有评论(0)