Vue3+TypeScript学习笔记(十五)

简介: 本节记录transition动画组件的基本使用方式

写在前面:除v-if外,其他的props(包括enter-active-class之类)都要写在transition标签上,直接写在原生/组件标签身上将不会有任何效果!

  1. transition也是Vue的一个内置组件,主要用来控制模板中元素的动画效果。需要注意的是transition中仅能有一个根标签,否则将报错

仅能有一个根标签

<!-- 正常 -->
<transition>
    <div>
        <div></div>
    </div>
</transition>

<!-- 报错 -->
<transition>
    <div></div>
    <div></div>
</transition>
  1. 安装动画库:pnpm add animate.css
props 作用
name 规定动画的类名前缀(若无则为v)
duration 规定过渡的持续时间——严格来讲是含有过渡的active类出现在元素身上的时间,主要目的是防止嵌套元素中父元素过渡过早完成(传入一个number则同时控制进入和离开,传入一个{enter:,leave:}的对象则分别控制进入和离开)
enter-active-class 进入动画的类名,如需使用动画库或不想使用name-class-enter,希望自定义动画类名时使用
leave-active-class 离开动画的类名,如需使用动画库或不想使用name-class-leave,希望自定义动画类名时使用

完整代码:
App.vue

<template>
    <!-- 最简单的使用方法,仅规定了name -->
    <div class="card">
        <transition name="box">
            <A v-if="flag"></A>
        </transition>
        <button @click="flag = !flag">显示/隐藏组件</button>
    </div>

    <!-- 使用动画库,需要注意的是从animate.css4版本开始,动画类名前要加上animate__animated才能生效 -->
    <div>
        <transition
            :duration="{ enter: 1000, leave: 0 }"
            enter-active-class="animate__animated animate__fadeInLeftBig"
        >
            <B v-if="flag2"></B>
        </transition>
        <button @click="flag2 = !flag2">显示/隐藏组件2</button>
    </div>

    <!-- 使用类名代替three-enter-active和three-leave-active。因为是动画所以无需three-enter-from之类 -->
    <div>
        <transition name="three" enter-active-class="enterOne" leave-active-class="leaveOne">
            <C v-if="flag3"></C>
        </transition>
    </div>
    <button @click="flag3 = !flag3">显示/隐藏组件3</button>
</template>

<script setup lang="ts">
import 'animate.css'
import { ref, reactive } from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'

let flag = ref(true)
let flag2 = ref(true)
let flag3 = ref(true)
</script>

<style scoped>
.card {
    border: 1px solid black;
}
.background {
    width: 200px;
    height: 200px;
    background-color: red;
}
.box-enter-from {
    width: 0;
    height: 0;
}
.box-enter-active {
    transition: all 1s ease;
}
.box-enter-to {
    width: 200px;
    height: 200px;
    transform: rotate(-360deg);
}
.box-leave-from {
    width: 200px;
    height: 200px;
}
.box-leave-active {
    transition: all 1s ease;
}
.box-leave-to {
    width: 0;
    height: 0;
    transform: rotate(360deg);
}
.enterOne {
    animation: bounce-in 1s ease;
}
.leaveOne{
    animation: bounce-in 1s ease reverse;
}
@keyframes bounce-in {
    from {
        width: 0;
        height: 0;
    }
    to {
        width: 200px;
        height: 200px;
    }
}
</style>

A.vue

<template>
    <div></div>
</template>

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

</script>

<style scoped>
div{
    width: 200px;
    height: 200px;
    background-color: red;
}
</style>

B和C除了背景颜色background-color不一样,其他都和A相同

相关文章
|
4月前
|
自然语言处理 JavaScript 前端开发
一夜获千星!已获 1.7k+,Art Design Pro:Vue3 + Vite + TypeScript 打造的高颜值管理系统模板,这个让后端小哥直呼救命的后台系统
Art Design Pro 是一款基于 Vue 3、Vite 和 TypeScript 的高颜值后台管理系统模板,已获 1.7k+ 星标。项目专注于用户体验与视觉设计,支持主题切换、多语言、权限管理及图表展示等功能,内置常用业务组件,便于快速搭建现代化管理界面。其技术栈先进,开发体验流畅,适配多设备,满足企业级应用需求。项目地址:[GitHub](https://github.com/Daymychen/art-design-pro)。
580 11
|
5月前
|
JavaScript 前端开发 编译器
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
216 22
|
8月前
|
JavaScript 安全 前端开发
Gzm Design:开源神器!用 Vue3、Vite4、TypeScript 革新海报设计,免费开源的海报设计器,主流技术打造,轻松高效
海报设计在各个领域都有着广泛的应用,无论是商业广告、活动宣传还是个人创意表达。今天要给大家介绍一款免费开源的海报设计器——Gzm Design,它基于最新的主流技术开发,为用户提供了丰富的功能,让海报设计变得轻松又高效。
463 64
|
8月前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
480 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
12月前
|
JavaScript 安全 开发工具
在 Vue 3 中使用 TypeScript
【10月更文挑战第3天】
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
|
JavaScript 前端开发 API
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表
|
JavaScript 前端开发 安全
【技术革新】Vue.js + TypeScript:如何让前端开发既高效又安心?
【8月更文挑战第30天】在使用Vue.js构建前端应用时,结合TypeScript能显著提升代码质量和开发效率。TypeScript作为JavaScript的超集,通过添加静态类型检查帮助早期发现错误,减少运行时问题。本文通过具体案例展示如何在Vue.js项目中集成TypeScript,并利用其类型系统提升代码质量。首先,使用Vue CLI创建支持TypeScript的新项目,然后构建一个简单的待办事项应用,通过定义接口描述数据结构并在组件中使用类型注解,确保代码符合预期并提供更好的编辑器支持。
209 1

热门文章

最新文章