,这里说的是vue2.0和animate.css的结合使用。其实用过就知道用法是比较简单的。但是就是刚开始使用的时候,难免有的会遇到各种问题。简单的说说我所用过并且遇过的坑。
,,,首先是过渡组件,在2.0中由过渡属性变成了一个独立的组件。
,,
,,1,
,,,,要用animate.css,那么首先需要做的就是导入它。局部的导入的话,就在当前的。vue文件中风格的标签中导入:@ import“animate.css”,,,注意,导入css文件的时候。在末尾应该是要加上分号的。如果不加的话,会影响后面写的局部样式
2,
,开始使用animate.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>
以上所述是小编给大家介绍的vue2.0和animate.css的结合使用,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
