vue动画笔记
时间：2023-03-31 11:01:01
CSS
background内置的和组件同时支持CSS和JShooktransitions和animations：transition是将值从一种状态插入到另一种状态（从初始状态到结束状态，然后返回）动画不同，可以在一条语句中设置多个状态（比如在动画50%的位置设置一个关键帧，然后在70%的位置，还可以设置延时属性来实现复杂的运动）CSStransition假设有一个简单的模态窗口。通过单击按钮显示或隐藏模态窗口。可以这样做：创建一个按钮的vue实例，在该实例中创建一个子组件，并设置数据的状态，这样就可以通过切换布尔值和添加事件处理来实现子组件的显示和隐藏。可以使用v-if或v-show切换组件的可见性。也可以使用槽来放置模态窗口的切换状态转换部分：关闭.fade-enter-active,.fade-leave-active{transition:opacity0.25sease-out;}.fade-enter,.fade-leave-to{opacity:0;}CSSanimation所有有趣的动画都是基于enter-active和leave-active可以给每个实例一个特殊的classenter-active-class="toasty"leave-active-class="bounceOut"动画部分结构:
为了反弹，如果使用CSS，需要设置很多关键帧，@mixinballb($yaxis:0){transform:translate3d(0,$yaxis,0);}@关键帧bouncein{1%{@includeballb(-400px);}20%,40%,60%,80%,95%,99%,100%{@includeballb()}30%{@includeballb(-80px);}50%{@includeballb(-40px);}70%{@includeballb(-30px);}90%{@includeballb(-15像素);}97%{@includeballb(-10px);}}.bouncein{animation:bouncein0.8scubic-bezier(0.25,0.46,0.45,0.94)both;}.ballmove-enter{@includeballb(-400px);}@keyframesrollout{0%{transform:translate3d(0,300像素,0);}100%{转换：translate3d(1000px,300px,0);}}@keyframesballroll{0%{变换：旋转（0）；}100%{变换：旋转（1000度）；}}.rollout{宽度：60px；高度：60px；动画：rollout2scubic-bezier(0.55,0.085,0.68,0.53)both;div{动画：ballroll2scubic-bezier(0.55,0.085,0.68,0.53)both;}}JS动画有很多简单易用的动画JS钩子所有钩子都会传入el参数，除了动画钩子（enter和leave）也会传入done作为参数（其作用是告诉Vue动画结束）
在最基本的层面上，这是开始和结束动画所需要的，包括相关方法：methods:{enterEl(el,done){//entranceanimationdone();},leaveEl(el,done){//exitanimationdone();},}
