Vue3 +Transition组件和Scss动画实现B站分享鼠标移入移出滑动效果。

1.介绍组件

Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过渡和动画：

• <Transition> 会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用它。

• <TransitionGroup> 会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。我们将在下一章节中介绍。

除了这两个组件，我们也可以通过其他技术手段来应用动画，比如切换 CSS class 或用状态绑定样式来驱动动画。这些其他的方法会在动画技巧章节中展开。

2.先看看官方示例

<Transition> 组件#
<Transition> 是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发：

由 v-if 所触发的切换
由 v-show 所触发的切换
由特殊元素 <component> 切换的动态组件
以下是最基本用法的示例：

template
<button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">hello</p>
</Transition>
css
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

3.实现b站分享滑入滑出效果简单示例

<template>
  <el-button @mousemove.stop="mousemovefn" @mouseleave="mouseleavefn">点击</el-button>
  <div class="overBoxname">
    <Transition name="slide-fade">
    <div v-if="show">
      <p>190</p>
    </div>
  </Transition>
  <Transition name="overflde-fade">
    <div class="boxes" v-if="!show">
      <p>点击复制链接</p>
    </div>
  </Transition>
  </div>
</template>
<script setup lang="ts">
const show = ref(true)
const mouseleavefn = ()=>{
  show.value=true
}
const mousemovefn =()=>{
  show.value=false

}
</script>
<script lang="ts">
import {
  ref
} from 'vue'
</script>
<style scope lang="scss">
body {
  --primary-color: #255fef;
}
</style>
<style scoped>
.overBoxname{
  height: 50px;
  overflow: hidden;
  padding-top: 16px;
}
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
// 数量动画
// 分享链接盒子动画 为false则会执行显示动画过程从-40px回到原点实现向下走 为true则为自己起点向上走
.slide-fade-enter-active {
  transition: all .3s ease-out;
}

.slide-fade-leave-active {
  transition: all .3s ease-out;
}

.slide-fade-enter-from {
  transform: translateY(-40px);
}
.slide-fade-leave-to {
  transform: translateY(-40px);
}


// 分享链接盒子动画 为false则会执行显示动画过程从100px回到原点实现向上走 为true则为自己起点向下走
.overflde-fade-enter-active {
  transition: all .3s linear;
}

.overflde-fade-leave-active {
  transition: all .3s linear;
}

.overflde-fade-enter-from {
  transform: translateY(100px);
}
.overflde-fade-leave-to {
  transform: translateY(80px);
}
</style>

4.Scss实现

<template>
  <el-button @mousemove.stop="show = false" @mouseleave="show = true"
    >点击</el-button
  >
  <div class="overBOxanem">
    <div :class="show ? 'boxinit' : 'boxoneover'">
      <p>190</p>
    </div>
    <div class="boxtow" :class="show ? 'boxtwoinit' : 'boxtwoover'">
      <p>点击复制链接</p>
    </div>
  </div>
</template>
<script setup lang="ts">
const show = ref(true)
</script>
<script lang="ts">
import { ref } from 'vue'
</script>
<style scope lang="scss">
body {
  --primary-color: #255fef;
}
</style>
<style scoped>
/* 数量 */
.overBOxanem {
  height: 50px;
  overflow: hidden;
  padding-top: 16px;
  transition: all 1s linear;
}
/* 初始化位置 */
.boxinit {
  transition: all 1s linear;
}
/* 向上 */
.boxoneover {
  transition: all 1s linear;
  transform: translateY(-50px);
}

/* 分享链接 */
/* 初始化 false则向下*/
.boxtwoinit {
  transition: all 1s linear;
  transform: translateY(50px);
}
/* 向上 */
.boxtwoover {
  transition: all 1s linear;
  transform: translateY(-25px);
}
</style>