动态组件(transition)

作者: 元宇宙编程 | 来源:发表于2020-01-09 14:33 被阅读0次

vue keep-alive
11、用 transition 组件轻松实现过渡效果
动画5——组件切换动画和mode属性
Vue.js 过渡动画
Vue之transition
React 插件
vue组件切换过渡效果
组件过渡&动画之transition方法
动画组件
vue（三）：动画

动态组件

 <!DOCTYPE html>
 <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fade-enter-active,.fade-leave-active{
    transition: all 2s;
}
.fade-enter,.fade-leave-to{
    opacity: 0;
    transform:translateY(100px);
}
</style>
</head>
 <body>
 <div id="app">
<button @click="show = !show">点击按钮</button>
<!--
    name="fade"表示渐变
    他虽然我们说是表示渐变，实际上还是由咱们自己的样式控制

    只是增加然后移除了class
-->
<transition name="fade">
    <p v-if="show">Hello World~!</p>
</transition>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
    show:true,
   }
 })
</script>
</body>
</html>

动态组件钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div>div{
    width: 100px;
    height: 100px;
    background: red;
}
</style>
<link rel="stylesheet" href="css/animate.css"/>
</head>
<body> 
<div id="app">
<button @click="show = !show">点击按钮</button>
<!--
    这几个钩子函数只是帮助我们更好开发，真正开发的时候可以不用他

-->
<transition name="fade"
     @before-enter="beforeEnter"
     @enter="enter"
     @after-enter="afterEnter"
     @before-leave="beforeLeave"
     @leave="leave"
     @after-leave="afterLeave"
 enter-active-class="bounceInLeft" leave-active-class="bounceInRight">
    <div v-if="show" class="animated">Hello World~!</div>
</transition>
 </div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
    show:true,
},
methods:{
    beforeEnter(){
        console.log("beforeEnter");
    },
    enter(){
        console.log("enter");
    },
    afterEnter(){
        console.log("afterEnter");
    },
    afterLeave(){
        console.log("afterLeave");
    },
    beforeLeave(){
        console.log("beforeLeave");
    },
    leave(){
        console.log("leave");
    }
}
})
</script>

</body>
</html>