vue2.0——运动

来源：互联网发布：php分页代码兄弟连编辑：程序博客网时间：2024/06/07 06:31

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .show_box{            width:100px;            height:100px;            background: aqua;        }    </style>    <script src="../js/Vue.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{                    show:false                }            });        }    </script></head><body><div id="box">    <input type="button" value="点击显示隐藏" @click="show=!show">    <p class="show_box" v-show="show"></p></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .show_box{            width:300px;            height:300px;            background: aqua;        }        .fade-enter-active,.fade-leave-active{            transition: 1s all ease;        }        .fade-enter-active{            opacity: 1;            width:300px;            height:300px;        }        .fade-leave-active{            opacity: 0;            width:100px;            height:100px;        }        .fade-enter,.fade-leave{            opacity: 0;            width:100px;            height:100px;        }    </style>    <script src="../js/Vue.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{                    show:false                }            });        }    </script></head><body><div id="box">    <input type="button" value="点击显示隐藏" @click="show=!show">    <transition name="fade">        <p class="show_box" v-show="show"></p>    </transition></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .show_box{            width:300px;            height:300px;            background: aqua;        }        .fade-enter-active,.fade-leave-active{            transition: 1s all ease;        }        .fade-enter-active{            opacity: 1;            width:300px;            height:300px;        }        .fade-leave-active{            opacity: 0;            width:100px;            height:100px;        }        .fade-enter,.fade-leave{            opacity: 0;            width:100px;            height:100px;        }    </style>    <script src="../js/Vue.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{                    show:false                },                methods:{                    before_enter(){                        console.log('动画进入之前');                    },                    enter(){                        console.log('动画进入开始');                    },                    after_enter(){                        console.log('动画进入完成');                    },                    before_leave(){                        console.log('动画离开之前');                    },                    leave(){                        console.log('动画离开开始');                    },                    after_leave(){                        console.log('动画离开结束');                    }                }            });        }    </script></head><body><div id="box">    <input type="button" value="点击显示隐藏" @click="show=!show">    <transition name="fade"                @before-enter="before_enter"                @enter="enter"                @after-enter="after_enter"                @before-leave="before_leave"                @leave="leave"                @after-leave="after_leave"    >        <p class="show_box" v-show="show"></p>    </transition></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="../css/animate.css">    <style>        .show_box{            width:300px;            height:300px;            background: aqua;        }    </style>    <script src="../js/Vue.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{                    show:false                }            });        }    </script></head><body><div id="box">    <input type="button" value="点击显示隐藏" @click="show=!show">    <transition        enter-active-class="zoomInLeft"        leave-active-class="zoomOutRight"    >        <p class="show_box animated" v-show="show"></p>    </transition></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="../css/animate.css">    <style>        .show_box{            width:300px;            height:300px;            background: aqua;            margin:10px auto;        }    </style>    <script src="../js/Vue.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{                    show:false                }            });        }    </script></head><body><div id="box">    <input type="button" value="点击显示隐藏" @click="show=!show">    <transition-group        enter-active-class="zoomInLeft"        leave-active-class="zoomOutRight"    >        <p class="show_box animated" v-show="show" :key="1"></p>        <p class="show_box animated" v-show="show" :key="2"></p>    </transition-group></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="../css/animate.css">    <style>        .show_box{            width:100px;            height:100px;            line-height: 100px;            text-align: center;            background: aqua;            margin:10px auto;        }    </style>    <script src="../js/Vue.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{                    show:'',                    list:['apple','bnanan','people','orange'],                },                computed:{                    lists(){                        var arr=[];                        this.list.forEach(function(val){                            if(val.indexOf(this.show)!=-1){                                arr.push(val);                            }                        }.bind(this));                        return arr;                    }                }            });        }    </script></head><body><div id="box">    <input type="text" v-model="show">    <transition-group        enter-active-class="zoomInLeft"        leave-active-class="zoomOutRight"    >        <p class="show_box animated" v-show="show" v-for="(val,index) in lists" :key="index" >{{val}}</p>    </transition-group></div></body></html>

0 0