vue过渡动画效果transition淡入淡出
过渡其实就是一个淡入淡出的效果Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件对于这些在过渡中切换的类名来说,如果你使用一个没有名字的<transition>,则v-是这些类名的默认前缀。如果你使用了<transition name="my-transition">,那么v-ente
·
过渡其实就是一个淡入淡出的效果
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果
Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件
对于这些在过渡中切换的类名来说,如果你使用一个没有名字的
<transition>
,则v-
是这些类名的默认前缀。如果你使用了<transition name="my-transition">
,那么v-enter
会替换为my-transition-enter
。
语法格式:
<transition name = "nameoftransition">
<div></div>
</transition>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
<script src="./js/vue.js"></script>
<style>
.fade-enter-active, .fade-leave-active {
/* opacity 透明度 */
transition: opacity 1s
}
/* .fade-leave-active, 2.1.8 版本以下 */
.fade-enter, .fade-leave-to {
opacity: 0
}
</style>
</head>
<body>
<script src="./dist/bundle.js"></script>
<div id="app">
<button @click="isShow">点我</button>
<!-- 方法2 直接在按钮里取反 不写方法其他不变 -->
<!-- <button @click="show=!show">切换</button> -->
<transition name="fade">
<h3 v-show="show">动画实例</h3>
</transition>
</div>
<script>
var app = new Vue ({
el:"#app",
data:{
show:true
},
methods:{
isShow(){
this.show = !this.show;
}
}
})
</script>
</body>
</html>
效果图:https://www.runoob.com/try/try.php?filename=vue2-transition
更多推荐
已为社区贡献15条内容
所有评论(0)