vue的动画在这里采用transform实现,在这里分为三种进阶状态:
1.transform
我才用的动画基本上有两种,一种是上下左右移动;一种是放大缩小
transform: translateY(5px); /* 向下移动 5 像素 */
transform: translateY(-5px); /* 向上移动 5 像素 */
transform: translateX(5px); /* 向右移动 5 像素 */
transform: translateX(-5px); /* 向左移动 5 像素 */
transform: scale(1.1)/* 放大到原来的1.1倍 */
transform: scale(1)/* 与原来一般大小 */
transform: scale(0.9)/* 缩小到原来的0.9倍 */
动画一般有需要平滑效果看起来才会不突兀,故需要在原div中设置变化时的过渡效果,这种过渡会在指定的时间(这里是 0.3 秒)内完成,并且按照指定的速度曲线(这里是 ease-out)进行。
transition: transform 0.3s ease-out;
整体源代码如下:
<div class="hoverTitleup" @click="position1">
<div style="height: 2vw;width: 2vw;margin-right: 1vw"><img loading="lazy" src="@/assets/banner1.png">
</div>
油气资讯GPTs
</div>
.hoverTitleup{
border: #e5e6ea 1px solid ;
box-shadow: 5px 0 14px 0px #D4E4FF;
padding: 0.8vh 0.5vw;
border-radius: 9px;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
cursor: pointer;
transition:transform 0.3s ease-out;
}
.hoverTitleup:hover{
transform:translateY(-5px);
}
鼠标悬浮效果如下:
2.animation
上述的transform只实现一种单向的变化,animation可以实现反复多向的变化。@keyframes 是一个 CSS 规则用于定义动画的关键帧,再定义一个自定义的名字用于标识这段动画,0% 和 100% 表示动画的起点和终点,动画将从 0% 开始,逐渐过渡到 100%。
.title3img{
cursor: pointer;
height: 4vh;
width: 2vw;
margin-top: 1.5vh;
animation: pulse 2s infinite;
background-image: url("../assets/focusdown.png");
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
border: none;
}
@keyframes pulse {
0% {
transform: translateY(5px);
}
100% {
transform: translateY(-5px);
}
}
3.使用animate.css第三方动画库
官方文档https://animate.style/
3.1安装
npm install animate.css
3.2mian.js引入
import 'animate.css'
3.3使用
<transition name="run" appear>
<div> </div>
</transition>
.run-enter-active {
animation: backInUp 1s linear 0s;
}
.run-leave-active {
animation: backInUp 1s linear 0s;
}
其中的name与样式中的name相对应,animation:这是一个复合属性,用于定义一个或多个动画的效果。backInUp:这是一个自定义的 @keyframes 动画名称,表示动画的关键帧,与官网中的保持一致;1s:这是指定动画的持续时间;linear:linear 表示动画在整个持续时间内将以恒定的速度进行;0s:这是指定动画的延迟时间;
4.从固定高度到另一个固定高度的动画
高度从固定高度到另一个固定高度的动画就可用animate.css第三方动画库实现。
界面代码:
<transition name="expand-height" appear>
<div
ref="talkCon"
class="talk_con animate__animated animate__slow"
:class="{ 'expanded': focus }"
:style="focus ? { height: '75vh' } : { height: '58vh' }"
>
</div>
</transition>
高度转变的方法:
focusinput(){
this.focus=1
this.$emit('focusInput', 1);
console.log("获取到焦点")
},
CSS代码
.expand-height-enter-active,
.expand-height-leave-active {
transition: height 5s ease;
}
.expand-height-enter-from,
.expand-height-leave-to {
height: 58vh;
}
.expanded {
height: 75vh;
overflow: hidden;
}
.talk_con {
transition: height 1s ease;
border-radius:5px;
height:58vh;
width: 52vw;
text-align: center;
margin: 0 auto;
}
综上,可以实现从固定高度到另一个固定高度的动画,动画实现效果可我们的平台界面可看看奥!油气通