【Vue3】插槽使用和animate使用

已于 2024-03-01 09:51:20 修改
阅读量628 收藏 7
点赞数 22
分类专栏： 【Vue3】专栏 文章标签： 前端 vue
于 2024-02-26 15:47:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44899940/article/details/136169409
版权

插槽使用

插槽slot

  • 插槽就是子组件中提供给父组件使用的一个占位符
  • 父组件可以在这个占位符智能填充任何模板代码，填充的内容会在替换子组件的slot标签
匿名插槽
  • 子组件
<template>
  <div class="main">
    <h1>子组件</h1>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
</script>

<style scoped></style>
  • 父组件
<template>
  <div class="main"></div>
  <Aslot>
    <template v-slot>
      <div>匿名插槽</div>
    </template>
  </Aslot>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import Aslot from './components/slot.vue';
</script>

<style scoped></style>
具名插槽
  • 子组件
    在这里插入图片描述
  • 父组件
    在这里插入图片描述
插槽作用域
  • 作用域插槽其实就是带数据的插槽，即带参数的插槽，
  • 简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用
  • 父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。
  • 子组件
<template>
  <div class="main">
    <slot></slot>
    <h1>子组件</h1>
    <div v-for="(item, index) in data" :key="index">
      //父组件需要什么值，就传递什么值
      <slot :data="item" :index="index"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
//定义要给父组件的内容
const data = reactive([
  { name: '1', age: 1 },
  { name: '2', age: 2 },
]);
</script>

<style scoped></style>
  • 父组件
<template>
  <div class="main"></div>
  <Aslot>
    <template v-slot="{ data, index }">
      <div>{{ data }}--{{ index }}</div>
    </template>
  </Aslot>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import Aslot from './components/slot.vue';
</script>

<style scoped></style>
简写
<template>
  <div class="main"></div>
  <Aslot>
  //v-slot变成# 
    <template #centerslot>
      <div>具名插槽</div>
    </template>
    <template #default="{ data }">
      <div>{{ data.name }}--{{ data }}</div>
    </template>
  </Aslot>
</template>

动态插槽

在这里插入图片描述

transition动画组件

  • vue提供transition的封装组件，在下列情形下，可以给任何元素和组件添加进入/离开过渡
  • 条件渲染（v-if)
  • 条件展示（v-show)
  • 动态组件
  • 组件根节点

  • 在进入和离开的过渡中，会有6个class的切换

  • name提供类名

<template>
  <div class="main">
    <!-- transition，动画组件 -->
    <transition name="box">
      <div v-if="isblooen" class="box-bg">动画盒子</div>
    </transition>
    <button @click="change">切换1</button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
let isblooen = ref('true');
const change = () => {
  isblooen.value = !isblooen.value;
};
</script>
//在进入和离开的过渡中，会有6个class的切换
<style scoped lang="less">
.box-bg {
  width: 200px;
  height: 200px;
  border: 1px solid #00f;
}
//显示之前，第一个字母和上面name一致
.box-enter-from {
  width: 0px;
  height: 0px;
  background: #777;
}
//动画开始
.box-enter-active {
  background: #777;
  transition: all 10s ease;
}
//动画结束
.box-enter-to {
  width: 200px;
  height: 200px;
  background: #777;
}
//隐藏之前
.box-leave-from {
}
//隐藏中
.box-leave-active {
}
//隐藏后
.box-leave-to {
}
</style>

在这里插入图片描述

自定义过渡class类名
<template>
  <div class="main">
    <!-- transition，动画组件 -->
    <transition name="box">
      <div v-if="isblooen" class="box-bg">动画盒子</div>
    </transition>
    <!-- 写法2 自定义过渡class类名-->
    <transition
      name="box"
      enter-form-class="e-form"
      enter-active-class="e-active"
      enter-to-class="e-to"
    >
      <div v-if="isblooen" class="box-bg">动画盒子</div>
    </transition>
    <button @click="change">切换1</button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
let isblooen = ref('true');
const change = () => {
  isblooen.value = !isblooen.value;
};
</script>

<style scoped lang="less">
.box-bg {
  width: 200px;
  height: 200px;
  border: 1px solid #00f;
}
//显示之前
.box-enter-from {
  width: 0px;
  height: 0px;
  background: #777;
}
//写法2，自定义类名
.e-form {
  width: 0px;
  height: 0px;
  background: #777;
}
//动画开始
.box-enter-active {
  background: #777;
  transition: all 10s ease;
}
.e-active {
  background: #755577;
  transition: all 10s ease;
}
//动画结束
.box-enter-to {
  width: 200px;
  height: 200px;
  background: #777;
}
.e-to {
  width: 200px;
  height: 200px;
  background: #766677;
}
//隐藏之前
.box-leave-from {
}
//隐藏中
.box-leave-active {
}
//隐藏后
.box-leave-to {
}
</style>
如何使用animate动画库组件
  • 安装： npm install animate.css
  • 官方文档地址
  • 步骤2，导入动画库
    在这里插入图片描述
  • 步骤三，使用
  • leave-active-class是6个class的动画类名
    在这里插入图片描述
    在这里插入图片描述
动画生命周期

在这里插入图片描述

appear
  • 通过这个属性可以设置初始节点，就是页面加载完成就开始动画对应的三个状态
  • 相当于一进来，动画就开始执行
<template>
  <div class="main">
    <transition
      appear
      appear-class="animate__animated animate__backInLeft"
      appear-active-class="animate__animated animate__backInRight"
      appear-to-class="animate__animated animate__backOutUp"
    >
      <div v-if="isblooen" class="box-bg">动画盒子</div>
    </transition>
    <button @click="change">切换1</button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import 'animate.css';

let isblooen = ref('true');
const change = () => {
  isblooen.value = !isblooen.value;
};
</script>

<style scoped lang="less">
.box-bg {
  width: 200px;
  height: 200px;
  border: 1px solid #00f;
}
//显示之前
.box-enter-from {
  width: 0px;
  height: 0px;
  background: #777;
}
.e-form {
  width: 0px;
  height: 0px;
  background: #777;
}
//动画开始
.box-enter-active {
  background: #777;
  transition: all 10s ease;
}
.e-active {
  background: #755577;
  transition: all 10s ease;
}
//动画结束
.box-enter-to {
  width: 200px;
  height: 200px;
  background: #777;
}
.e-to {
  width: 200px;
  height: 200px;
  background: #766677;
}
//隐藏之前
.box-leave-from {
}
//隐藏中
.box-leave-active {
}
//隐藏后
.box-leave-to {
}
</style>

transition- group过渡列表

  • 相当于transition-group包裹的内容，可以给他们添加，删除，初始化增加动画效果
  • 不同于 ， 会以一个真实元素呈现：默认为一个 （我们可以通过 tag 特性更换为其他元素。）
<template>
  <div class="main">
    <!-- appear-active-class是初始化动画
         enter-active-class是添加是动画
         leave-active-class是删除时动画-->
    <transition-group
      appear
      appear-active-class="animate__animated 
      animate__backInDown"
      enter-active-class="animate__animated 
      animate__backInDown"
      leave-active-class="animate__animated 
      animate__lightSpeedInRight"
    >
      <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    </transition-group>
    <button @click="add">添加</button>
    <button @click="del">删除</button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import 'animate.css';
const list = reactive<number>([1, 2, 3, 4, 5, 6]);
//增加
const add = () => {
  list.push(9);
};
//删除
const del = () => {
  list.pop();
};
</script>

<style scoped></style>

在这里插入图片描述

transition- group平面过渡

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 引入lodash

  • npm install lodash -S

  • 页面引入

  • import _ from ‘lodash’;

  • 发现报错
    在这里插入图片描述

  • 解决报错

  • 安装声明文件： npm install @types/lodash -D

  • 然后重启一下

代码展示
<template>
  <div class="main">
    <button @click="changeTab">千变万化</button>
    <div class="all">
      <transition-group move-class="start">
        <div v-for="item in list" :key="item.id" class="bar">
          {{ item.number }}
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import _ from 'lodash';
let list = ref(
  Array.apply(null, { length: 81 }).map((_, index) => {
    return {
      id: index,
      number: (index % 9) + 1,
    };
  })
);
const changeTab = () => {
  list.value = _.shuffle(list.value);
};
</script>

<style scoped lang="less">
.all {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}
.bar {
  border: 1px solid #f0f0f0;
  padding: 4px;
}
.start {
  transition: all 1s;
}
</style>
  • 注意的是all样式想加在transition-group上，必须添加tag=’div‘
    在这里插入图片描述

gsap动画库 状态过渡

在这里插入图片描述
在这里插入图片描述

  • 代码
  • 安装gsap：npm i gsap -save
  • gsap一款基于 JavaScript 的 web 动画库
<template>
  <div class="main">
    <input type="number" v-model="num.current" step="20" />
    <div>{{ num.Numbertxt }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import gsap from 'gsap';
const num = reactive({
  current: 0,
  Numbertxt: 0,
});
watch(
  () => num.current,
  (newVal, oldVal) => {
    console.log(newVal);
    gsap.to(num, {
      duration: 1,
      Numbertxt: newVal,
    });
  }
);
</script>

<style scoped></style>
花神yyds
关注
  • 22
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue使用插槽分发内容slot的用法
10-17
主要介绍了vue使用插槽分发内容slot的用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3使用animate.css实现动画效果！
hubert39641020的博客
07-26 5305
过渡动画httpshttpshttpshttpshttps。
在vue3引用Animate.css（一个CSS3 动画库）教程
热门推荐
oi
02-20 1万+
在vue项目中使用Animate.css库实现过渡动画效果 文章目录在vue项目中使用Animate.css库实现过渡动画效果前言一、Animate.css是什么？二、认识transition元素三、在vue项目中使用Animate.css库1.安装2.将其导入您的文件：3.使用总结 前言 简易的动画和巧妙的微交互功能如今风行一时。前端在创作页面的过程中，想要实现好看的动画效果需要编写大量的css代码，与基础不好的新手而言有一定难度，而使用Animate.css库可以帮助我们更加轻松的实现我们想要的动画
vue3中尝试使用animate
irisMoon06的博客
09-25 343
初次进入页面就显示动画效果，使用 appear及appear-active-class 来实现。
【Vue实战】Vue3动画神操作！教你实现和PPT一样的动画效果！
qq_21609191的博客
12-21 3627
最近写界面的时候，发现一个前端组件很好玩他就是鼎鼎大名的【】← 点 击 跳 转 官 网这篇主要详细介绍 Animate.css 的使用，还有一些简单实用的前端动画制作提示：以下是本篇文章正文内容，下面案例可供参考，部分内容翻译于官网这篇简单教学了如何使用Animate.css的简单功能使用下一篇会延续本篇前端动画实现教学，将会有部分简单@keyframes动画教学也会将本篇代码上传到Github进行公开敬请期待。
animate.css
weixin_30585437的博客
08-14 228
fade: { title: '淡入淡出', fadeIn: '淡入', fadeInDown: '向下淡入', fadeInDownBig: '向下快速淡入', fadeInLeft: '向右淡入', fadeInLeftBig: '向右快速淡入', fadeI...
vue3中使用tinyMCE
07-01
vue3中使用tinyMCE的demo，setup语法糖写法，解压后请删除node_model包后重新cnpm i
详解vue slot插槽的使用方法
08-30
本篇文章主要介绍了详解vue slot插槽的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
animate.css在vue项目中的使用教程
12-09
可以使用vue中的过渡transition，可以使用animate动画与transition配合使用，也可以单独使用animate动画库（详情可见vue官网-过渡：过渡），下面我们开始介绍在vue中单独使用animate动画，其实也非常简单，两步留...
vue插槽slot的理解和使用方法
10-17
主要给大家介绍了关于vue中插槽slot的理解和使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
前端之vue3使用动画库animate.css(含动画、过渡)
weixin_46372074的博客
05-12 4871
动画效果1.默认动画默认动画实例默认动画语法2.指定name动画 1.默认动画 默认动画实例 <template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition> <h2 v-show="isShow">动画效果</h2> </transition> </div> </template&g
Vite+Vue3项目使用第三方Animate.css动画库简单实现页面级的路由转场动画详细教程
薛定谔的猫的博客
09-25 1122
Vite+Vue3项目使用第三方Animate.css动画库简单实现页面级的路由转场动画详细教程
Vue3的transition标签以及animate.css使用详解
最新发布
如果相遇，那么你好哦~
11-28 1168
过渡效果可以说在开发中算是比较重要的一部分。熟练的掌握图像过渡可以更加合理贴切的显示与隐藏，在视觉上给用户更好的体验。并且书写逻辑也方便，可以类似断点的形式去定位问题出现的地方。
vue3中使用animate.css
bittingCat的博客
08-16 4926
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录animate.css在vue中的使用，路由动画transition或者在组件中控制使用一、安装和引入二、使用步骤1.用于router-view2.用于组件 animate.css在vue中的使用，路由动画transition或者在组件中控制使用 一、安装和引入 1.npm安装 npm install animate.css 2.在main.ts中引入 import { createApp } from 'vue' import
16_Vue3动画(一)之动画的基本使用及animate.css库的使用
酒客的博客
02-12 2309
Vue3动画的基本使用及animate.css库的使用 认识动画 在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验： React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库react-transition-group； Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果； 我们来看一个案例： Hello World的显示和隐藏； 通过下面的代码实现，是不会有任何动
三六、vue中使用animate.css
梅某某
08-01 9694
1.npm install animate.css –save2.main.js中引入 import animate from ‘animate.css’ Vue.use(animate) 3.页面中使用 <style type="text/css"> p { width: 300px; height: 300px; background: red; margin: 10
Vue3过渡&动画：animate.css、gsap库
米儿的博客
07-08 1965
如果我们手动一个个来编写这些动画，那么效率是比较低的，所以在开发中我们可能会引用一些第三方库的动画库， 比如animate.css。官网：https://animate.style/ 什么是animate.css呢？ Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders...
vue3项目引入animate.css教程
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
12-02 3477
vue3使用animate.css教程
vue3 插槽的作用和使用场景
04-24
Vue3中有两种类型的插槽：具名插槽和默认插槽。具名插槽允许您在组件中定义多个插槽，每个插槽的内容可以通过其名称来动态添加。默认插槽则是当没有其他插槽匹配时，会填充组件的默认内容。 插槽的使用场景非常广泛...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值