vue 动画transition的使用


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <style>
        p{
      
			width: 300px;
			height: 300px;
			background-color:red;
		}
        .test-enter-active,.test-leave-active{
      
			transition:all 2s ease;
		}
		.test-enter-active{
      
			opacity:1;
			width:300px;
			height:300px;
		}
		.test-leave-active{
      
			opacity:0;
			width:50px;
			height:50px;
		}
		/* .fade-enter需要放在.fade-enter-active的后面 */
		.test-enter{
      
			opacity:0;
			width: 10px;
			height: 10px;
		}
    style>
head>
<body>
    <div id="itapp">
        <button @click="flag=!flag">点我button>
        <transition name="test" 
            @before-enter="beforeEnter"
			@enter="enter"
			@after-enter="afterEnter"
			@before-leave="beforeLeave"
			@leave="leave"
			@after-leave="afterLeave">
            <p v-show="flag"
            >动画p>
        transition>  
    div>
    <script>
        var vm = new Vue({
      
            data(){
      
                return {
      
                    flag:false
                }
            },
            el:'#itapp',
            methods:{
      
                beforeEnter(){
      
                    console.log('动画进入之前');
                },
                enter(){
      
                    console.log('动画进入');
                },
                afterEnter(el){
      
                    console.log('动画进入之后');
                    el.style.background='blue';
                },
                beforeLeave(){
      
                    console.log('动画离开之前');
                },
                leave(){
      
                    console.log('动画离开');
                },
                afterLeave(){
      
                    console.log('动画离开之后');
                }
            }
           
        })
    script>
body>
html>


你可能感兴趣的:(#,vue)