vue中使用第三方插件animate.css实现动画效果

2024-04-29 08:58•css•阅读 4041

vue中使用第三方插件animate.css实现动画效果

1.首先先引入第三方类animated.css

2.将你所需要动画的标签用包裹起来

3.在transition元素中添加enter-active-class/leave-active-class入场离场属性

但是设置的值前面必须加上animated（当然也可以不在transition上设置animated，可以在你所要进行动画的标签上设置class属性为animated）

4.也可以加入:duration来统一设置入场和离场时候的时长

案例如下

<!DOCTYPE html>

<html >

<head>

<title>Document</title>

</head>

<body>

<div >这是一个H3</h3>

</transition>

</div>

var vm=new Vue({

el:'#app',

data:{

flag:false

methods:{

}

})

</script>

</body>

</html>