今天学习了vue过渡和动画。css结合使用,所以,添加一点小笔记。
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>动画& lt;/title>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/vue.js "祝辞& lt;/script>
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/animate.css " rel=巴獠縩ofollow”比;
& lt;风格类型=" text/css "比;
p {
宽度:300 px;
身高:300 px;
背景:红色;
保证金:10 px汽车;
}
& lt;/style>
& lt;脚本type=" text/javascript祝辞
窗口。onload=function () {
应用var=new Vue ({
埃尔:“#箱”,
数据:{
显示:假
}
}）
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=昂凶印北?
& lt; !——控制数据的值切换显示隐藏——比;
& lt;按钮@click=罢故?!秀”祝辞transition
& lt; !——& lt;过渡enter-active-class=" zoomInLeft " leave-active-class=皕oomOutRight”比;
& lt; p v-show="显示" class="动画"祝辞& lt;/p>
& lt;/transition>——比;
& lt; !——第二种方法——比;
& lt; !——& lt;过渡enter-active-class=岸瓃oomInLeft leave-active-class”=岸瓃oomOutRight”比;
& lt; p v-show="显示"祝辞& lt;/p>
& lt;/transition>——比;
& lt; !——多元素运动——比;
& lt;转变组enter-active-class=" zoomInLeft " leave-active-class=皕oomOutRight”比;
& lt; p v-show=靶恪眂lass=岸?关键=?”祝辞& lt;/p>
& lt; p v-show=靶恪眂lass=岸?关键=?”祝辞& lt;/p>
& lt;/transition-group>
& lt;/div>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
