vue动画实现从固定高度到另一个固定高度的动画

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;
}

综上，可以实现从固定高度到另一个固定高度的动画，动画实现效果可我们的平台界面可看看奥！油气通