vue动画笔记

cloud 发布于2019-08-26 10:39 / 1940人阅读

摘要：也可以使用放置模态窗的切换状态过渡部分结构动画所有有趣的动画都是基于和可以给每一个实例一个特殊类动画部分结构对于反弹对画，如果使用的话，需要设置大量关键帧，动画有很多适合动画的易于使用的钩子。

背景
内置的和组件同时支持CSS和JS钩子
过渡和动画的不同：
过渡就是从一个状态向另一个状态插入值（从起始状态，到结束状态，再回来）
动画不同，可以在一个声明中设置多个状态（比如动画50%的位置设置一个关键帧，
然后在70%的位置，也可以设置延迟属性实现复杂运动）
CSS过渡
假设有一个简单的模态窗。通过点击按钮显示或隐藏模态窗。可以这样做：
创建一个按钮的vue实例，在实例中创建一个子组件，设置数据的状态
这样可以通过切换布尔值并添加事件处理实现子组件的显示及隐藏。
可以使用v-if或者v-show来切换组件的可见性。也可以使用slot放置模态窗的切换状态
过渡部分结构:

.fade-enter-active, .fade-leave-active {
transition: opacity 0.25s ease-out;
}

.fade-enter, .fade-leave-to {
opacity: 0;
}
CSS动画
所有有趣的动画都是基于enter-active和leave-active
可以给每一个实例一个特殊类
enter-active-class="toasty"
leave-active-class="bounceOut"
动画部分结构:

name="ballmove"
enter-active-class="bouncein"
leave-active-class="rollout">

对于反弹对画，如果使用CSS的话，需要设置大量关键帧，
@mixin ballb($yaxis: 0) {
transform: translate3d(0, $yaxis, 0);
}

@keyframes bouncein {
1% { @include ballb(-400px); }
20%, 40%, 60%, 80%, 95%, 99%, 100% { @include ballb() }
30% { @include ballb(-80px); }
50% { @include ballb(-40px); }
70% { @include ballb(-30px); }
90% { @include ballb(-15px); }
97% { @include ballb(-10px); }
}

.bouncein {
animation: bouncein 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.ballmove-enter {
@include ballb(-400px);
}

@keyframes rollout {
0% { transform: translate3d(0, 300px, 0); }
100% { transform: translate3d(1000px, 300px, 0); }
}

@keyframes ballroll {
0% { transform: rotate(0); }
100% { transform: rotate(1000deg); }
}

.rollout {
width: 60px;
height: 60px;
animation: rollout 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
div {

animation: ballroll 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;

}
}

JS动画
有很多适合动画的易于使用的JS钩子。所有的钩子都会传入el参数，除了动画钩子(enter和leave)
还会传入done作为参数（它的作用就是告知Vue动画结束）
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"

@before-Leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
:css="false">

从最基本的层面看，这是开始动画和结束动画所需的，包括相关的方法：
@enter="enterEl"
@leave="leaveEl"
:css="false">

methods: {
enterEl(el, done) {

 //entrance animation
 done();

},
leaveEl(el, done) {

//exit animation
done();

},
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106529.html

vue动画笔记

摘要：也可以使用放置模态窗的切换状态过渡部分结构动画所有有趣的动画都是基于和可以给每一个实例一个特殊类动画部分结构对于反弹对画，如果使用的话，需要设置大量关键帧，动画有很多适合动画的易于使用的钩子。背景内置的和组件同时支持CSS和JS钩子过渡和动画的不同：过渡就是从一个状态向另一个状态插入值（从起始状态，到结束状态，再回来）动画不同，可以在一个声明中设置多个状态（比如动画50%的位置设置一...

GitChat 2019-08-30 15:44 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

klivitamJ 2019-08-30 13:48 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

Pines_Cheng 2019-08-21 17:08 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

ideaa 2019-08-01 17:48 评论0 收藏0
vue学习笔记（四）

摘要：提供了两种向组件传递参数的方式。子路由项路径不要使用开头，以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上，是通过不同的将这些资源加载后打包，然后输出打包后文件。一、vue-router 1、简介我们经常使用vue开发单页面应用程序（SPA）。在开发SPA过程中，路由是必不可少的部分，vue的官方推荐是vue-router。单页面应用程序看起来好像...

frank_fun 2019-08-21 17:16 评论0 收藏0