vue 1.0 结合animate.css定义动画效果
更新时间：2018年07月11日 10:29:15 作者：juneChen
本文分步骤给大家介绍了Vue 1.0自定义动画效果，vue1.0代码结合animate.css定义动画，页面一定要引入animate.cdd，具体实例代码大家参考下本文
Vue 1.0 动画（自定义动画）
步骤：
1.给当前动画元素添加‘transition'属性 其值就是动画名称(假如：fade)
2.给动画名称写css定义
a: .fade-transition{/*定义动画过渡*/ transition:1s all ease;}
b: .fade-enter{/*定义进入动画 注意：进入离开最终一样*/}
c：fade-leave{/*定义离开动画*/}
html 如下：
<div id="wrap">
<input type="button" value="按钮" @click="show">
<div class="box" v-show='isShow' transition='fade'></div>
</div>
.box{
width:100px;
height:100px;
}
.fade-transition{ /*定义动画的过渡效果*/
transition:1s all ease;
}
.fade-enter{ /*进入动画*/
opacity:0;
}
.fade-leave{/*离开的动画*/
opacity:0;
transform:translate(200px)
}
js
var vm=new Vue({
el:'#box',
data:{
isShow:true
},
methods:{
show(){
this.isShow=!this.isShow;
}
}
});
vue 1.0 结合animate.css定义动画
页面记得引入animate.cdd
html
<div id="box2"> <input type="button" value="按钮" @click='show'> <div id="div2" class="animated" v-show='isShow' transition="bounce"> </div> </div>
css
#div2{
width: 100px;
height: 100px;
background: red;
margin: 50px auto;
}
js
var vm2=new Vue({
el:'#box2',
data:{
isShow:true,
},
methods:{
show(){
this.isShow=!this.isShow;
}
},
transitions:{
bounce:{
enterClass:"zoomInLeft",
leaveClass:"zoomInRight"
}
}
})
总结
以上所述是小编给大家介绍的Vue 1.0自定义动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
在Vue3中可以使用`ref`来获取DOM元素,下面这篇文章主要给大家介绍了关于如何在Vue3中使用Ref访问DOM元素的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
浅谈vue中computed属性对data属性赋值为undefined的原因
本文主要介绍了浅谈vue中computed属性对data属性赋值为undefined的原因，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
vue3+ts+element-plus实际开发之统一调用弹窗封装的详细过程
这篇文章主要介绍了vue3+ts+element-plus实际开发之统一调用弹窗封装的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
这篇文章主要介绍了Vue 组件如何模块化抽离Props的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了Vue子组件向父组件通信与父组件调用子组件中的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要为大家详细介绍了vue结合uniapp实现生成二维码的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以学习一下2023-12-12
这篇文章主要介绍了详解express鉴权，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
这篇文章主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue中的数据格式化filters、formatter方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了Vue Router路由无法跳转问题汇总,在这里我整理了部分Vue Router路由无法跳转问题,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-09-09
最新评论