vue-transition动画

vue-transition动画

官网API: https://cn.vuejs.org/v2/guide/transitions.html

demo点击显示与消失

复制代码

Toggle

hello

复制代码 一、transition使用 运动东西(元素,属性、路由....) class定义:

.fade-enter{ } 进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;(运动的初始状态)

.fade-enter-active{ } 进入过渡的结束状态,元素被插入时就生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。

.fade-leave{ } 离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;

.fade-leave-active{ } 离开过渡的结束状态,元素被删除时生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。

二、自定义过度类名
默认的.fade-enter变成.fade-in-enter;

默认的.fade-enter-active变成.fade-in-active;

默认的.fade-leave变成.fade-out-enter;

默认的.fade-leave-active变成.fade-out-active;

复制代码
<transition
name=“fade”
enter-class=“fade-in-enter”
enter-active-class=“fade-in-active”
leave-class=“fade-out-enter”
leave-active-class=“fade-out-active”

<p v-show="show">hello</p>
复制代码 复制代码 .fade-in-active, .fade-out-active{ transition: all 0.5s ease } .fade-in-enter, .fade-out-active{ opacity: 0 }

复制代码
三、transition相关函数
复制代码
<transition name=“fade”
@before-enter=“beforeEnter”
@enter=“enter”
@after-enter=“afterEnter”
@before-leave=“beforeLeave”
@leave=“leave”
@after-leave=“afterLeave”

<p v-show="show"></p>
复制代码 复制代码 methods:{ beforeEnter(el){ console.log('动画enter之前'); }, enter(el){ console.log('动画enter进入'); }, afterEnter(el){ console.log('动画进入之后'); el.style.background="blue"; }, beforeLeave(el){ console.log('动画leave之前'); }, leave(el){ console.log('动画leave'); }, afterLeave(el){ console.log('动画leave之后'); el.style.background="red"; } } 复制代码

四、transition结合animate.css使用。
复制代码



或者



复制代码
五、多个元素运动

六。在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用uni-transition来创建自定义动画。uni-transition是CSDN开发的一种动画库,用于在Vue.js应用程序中添加过渡效果。 要使用uni-transition,你需要先安装它。在Vue.js项目中,你可以使用npm或yarn来安装uni-transition: ``` npm install uni-transition ``` 或者 ``` yarn add uni-transition ``` 安装完成后,你可以在Vue组件中引入uni-transition,并在需要应用动画的元素上使用相应的指令。 下面是一个示例,演示如何使用uni-transition创建一个自定义动画: ```vue <template> <div> <button @click="toggleAnimation">Toggle Animation</button> <div v-uni-transition="animationOptions" :class="{ 'animated': animate }"> <!-- Your content here --> </div> </div> </template> <script> import { UniTransition } from 'uni-transition'; export default { data() { return { animate: false, animationOptions: { enterActiveClass: 'fade-in', leaveActiveClass: 'fade-out', duration: 500, }, }; }, directives: { uniTransition: UniTransition, }, methods: { toggleAnimation() { this.animate = !this.animate; }, }, }; </script> <style scoped> .animated { transition-property: opacity; } .fade-in-enter-active { opacity: 0; transition-duration: 500ms; } .fade-in-leave-active { opacity: 0; transition-duration: 500ms; } .fade-in-enter-to, .fade-in-leave-from { opacity: 1; } </style> ``` 在上面的示例中,我们创建了一个按钮,点击按钮将切换动画的状态。元素上使用了v-uni-transition指令,并传递了animationOptions对象,其中指定了动画的类名和持续时间。在示例中,我们使用了fade-in和fade-out类来定义淡入淡出的效果。 当点击按钮时,animate属性的值将被切换,从而触发动画的进入或离开状态。 你可以根据需要自定义动画的效果和属性,例如动画类名、持续时间、延迟等。通过使用uni-transition,你可以轻松地为Vue.js应用程序添加自定义的过渡动画
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值