小型电子商务网站规划,wordpress共用用户数据,最新seo视频教程,网站开发技术期末考试试题一#xff1a;前言 在项目开发中#xff0c;有一种特殊情况是使用动画过渡去完成某个效果。比如淡入淡出#xff0c;或者在动画完成后执行某些操作等。在以前开发中我们通常会选择使用 CSS3 进行研发。但是这样会有很多不好的地方#xff0c;比如最原始化的封装#xff0c…一前言 在项目开发中有一种特殊情况是使用动画过渡去完成某个效果。比如淡入淡出或者在动画完成后执行某些操作等。在以前开发中我们通常会选择使用 CSS3 进行研发。但是这样会有很多不好的地方比如最原始化的封装以及复杂需求下的代码量庞大且冗余。再者就是本可以不使用 CSS 样式的文件又添加了 CSS 文件。这样是很奇怪的。 因此我们现在在进行动画过渡可以使用别人写好提供给我们的 animate.css 样式。而在 Vue3 开发中当我们需要在动画过渡前中后或者被中断的时候执行某些 JS 逻辑时可以使用 transition 标签。接下来让我们来看一下如何这两个如何使用吧
二使用
1、animate.css 先放上 animate.css 的官网
Animate.css | A cross-browser library of CSS animations.Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.https://animate.style/ 进入官网后我们可以在右侧看到有很多动画的样式随便点击一个样式后中间的文字会进行相对应的变化。 引入项目
首先打开项目在项目根目录下打开 powershell 输入 npm install animate.css -S等待安装成功后进入你需要使用的页面在文件内引入import animate.css;在官网中复制喜欢的样式放进你需要添加的标签的 class 中注意上面这一步需要在复制的前面加上 animate_animated 才可以有效果
div classanimate__animated animate__bounceOutDown v-ifisShow内容/divscript// 引入animate.cssimport animate.css;
/script 这时候我们就可以看到效果了。animate.css 的使用是很简单的。
2、transition 标签 这个标签是内置的我们直接在 html 中书写即可我们可以看到代码提示这代表着他是有多个接收值的并且有多个内置方法。知道这些我们就方便写后面的代码了。 1初始化代码 这里是我们代码的初始化代码效果如下图所示点击按钮显示或者隐藏里面的元素
templatediv classhomebutton clickisShow !isShow切换状态/buttontransitiondiv v-ifisShow classcontent/div/transition/div
/templatescript langts setup
import { ref } from vue;const isShow ref(false)
/scriptstyle scoped
.content {margin-top: 10px;width: 300px;height: 300px;background: pink;
}
/style 2第一种直接使用变量进行控制 这种是比较简单的方法如下面代码所示我们传了进入和离开的样式。这样的优点是结合 animate.css 代码行数比较少且具有较高的阅读性方便后期修改和维护。但是有一个不好的地方就是这样只是定义了单纯的动画过渡如果书写逻辑将会很繁琐需要定义 ref 等等这里我就不举例了。因此产生了使用方法控制。 transition :duration500leave-active-classanimate__animated animate__bounceOutDownenter-active-classanimate__animated animate__bounceInLeftdiv v-ifisShow classcontent/div/transition
3第二种使用内置方法进行控制 代码如下我们可以看到这八个内置方法其实是八个生命周期。以进入为例四个分别是进入前进入中进入后进入中断。这样我们可以在不同的周期中写不同的逻辑是不是很方便了 这里额外注意一下各个周期中的 el 是接收的这个 element 元素另外有两个特殊的周期是 enter 和 leave 。这两个的参数中有接收 done 当执行了这个 done 方法后才会执行 enter-after 声明周期。leave 同理。
templatediv classhomebutton clickisShow !isShow切换状态/buttontransition :duration500before-enterEnterBeforeenterEnterActiveafter-enterEnterToenter-cancelledEnterCancelledbefore-leaveLeaveFormleaveLeaveafter-leaveLeaveToleave-cancelledLeaveCancelldiv v-ifisShow classcontent/div/transition/div
/templatescript langts setup
import { ref } from vue;const isShow ref(false)const EnterBefore (el:Element){console.log(进入前);}
const EnterActive (el:Element,done:Function){console.log(进入中);setTimeout((){done() // 执行完成要等待三秒钟才会执行下面这个过度完成的方法},3000)
}
const EnterTo (el:Element){console.log(过度完成);
}
const EnterCancelled (el:Element){console.log(过渡效果被打断);
}// 离开
const LeaveForm (el:Element){console.log(离开之前);
}
const Leave (el:Element,done:Function){console.log(离开过度曲线);setTimeout((){done() // 执行完成要等待三秒钟才会执行下面这个过度完成的方法},3000)
}
const LeaveTo (el:Element){console.log(离开完成);
}
const LeaveCancell (el:Element){console.log(离开被打断);
}
/script 4使用 jasp 进行优化
使用 npm i gsap -S 安装jasp在项目中使用 import jasp from gasp 导入 项目代码优化如下我们本次只使用三个生命周期。这时我们看到的应该是一个在左上角缩放的图由于没有装转 git 工具因此这里不放效果 git 图。各位小伙伴可以在项目里 安装 animate 和 gasp 后直接将下面的代码复制进页面即可看到效果。
templatediv classhomebutton clickisShow !isShow切换状态/buttontransition :duration500before-enterEnterBeforeenterEnterActiveleaveLeavediv v-ifisShow classcontent/div/transition/div
/templatescript langts setup
import { ref } from vue;
import gsap from gsap // npm i gsap -Sconst isShow ref(false)const EnterBefore (el:Element){console.log(进入前);gsap.set(el,{width:0,height:0})
}
const EnterActive (el:Element,done:gsap.Callback){console.log(进入中);gsap.to(el,{width:300,height:300,onComplete:done // 加载完成后调用 done 方法})
}// 离开
const Leave (el:Element,done:gsap.Callback){console.log(离开过度曲线);gsap.to(el,{width:0,height:0,onComplete:done})
}/scriptstyle scoped
.content {margin-top: 10px;background: pink;
}
/style
三结尾 过渡效果可以说在开发中算是比较重要的一部分。熟练的掌握图像过渡可以更加合理贴切的显示与隐藏在视觉上给用户更好的体验。并且书写逻辑也方便可以类似断点的形式去定位问题出现的地方。好啦以上就是本文的全部内容希望能够对各位小伙伴有所收获哦
