当前位置：首页 > 编程日记 > 正文

Vue 过渡组件，可实现组件或者页面的动画过渡或者css过渡

编程日记 2024-08-02 06:00:00

使用过渡效果，可以优化用户体验，Vue给我们封装了一个很好用的组件，专门用来处理过渡效果，下面我们来看看怎么使用它；

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

一个简单的代码示例：

<div id="demo"><button v-on:click="show = !show">Toggle</button><transition name="fade"><p v-if="show">hello</p></transition>
</div>

new Vue({el: '#demo',data: {show: true}
})

.fade-enter-active, .fade-leave-active {transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0;
}

代码说明：

点击按钮以后会触发过渡组件 transition ，transition 里面包含组件 p ，每次点击按钮，p 组件就会有0.5秒的显示或者消失的过渡效果。

过渡的类名

在进入/离开的过渡中，会有 6 个 class 可以切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

https://www.dkcj.cn/info/12455.html

解释型和编译型编程语言_解释型和编译型编程语言：有什么区别？

解释型和编译型编程语言Every program is a set of instructions, whether it’s to add two numbers or send a request over the internet. Compilers and interpreters take human-readable code and convert it to computer-readable machine code. 每个程序都是一组指令&a…

编程日记2024/08/02 05:50:00

Beta 冲刺（1/7）

队名：天机组组员1友林 228（组长） 今日完成：查找了相关资料及api文档。明天计划：继续相关资料及源码。剩余任务：优化网络通讯机制主要困难：查找的代码调试较为困难。收获及疑问：暂无…

编程日记2024/08/02 05:40:00

Vue全局路由侦听beforeEach路由守卫附代码使用示例

使用路由守卫beforeEach，可以实现路由侦听； 全局侦听路由跳转的实现代码： app.vue onLaunch: function(e) {this.$router.beforeEach((to, from, next) > {console.log($router,to,from);next();}); } to 是跳转路由之后的page对象&am…

编程日记2024/08/02 05:30:00

Debug模式下加载文件，运行程序异常的慢

今天在进行单元测试的时候，debug模式下加载速度很慢，但是run模式下速度很快。原因：在debug模式下，断点位置不当，解决办法移除编译器中的所有断点。转载于:https://www.cnblogs.com/nww57/p/5277113.html

编程日记2024/08/02 05:20:00

如何在Python中对字符串进行子字符串化

Python offers many ways to substring a string. It is often called ‘slicing’.Python提供了许多对字符串进行子字符串化的方法。它通常被称为“切片”。 It follows this template:它遵循以下模板： string[start: end: step]Where,哪里， start:…

编程日记2024/08/02 05:10:00

HttpPost导包遇到的问题

直接在当前项目 build.gradle文件修改如下 android { useLibrary org.apache.http.legacy compileSdkVersion 24 buildToolsVersion "24.0.0" defaultConfig { applicationId "com.ican.subjects" minSdkVe…

编程日记2024/08/02 05:00:00

真相也许是这样

这两天同学们陆续上传了自己编写的小程序，等老师审查给成绩的时候才发现一部分同学是负分。原因就是他们有抄袭之嫌。恰巧我当时就在一位得了负分的同学旁边，他一脸郁闷的对我说”没道理啊，这是我自己编的啊“。这个我知道，的确是…

编程日记2024/08/02 04:50:00

微信小程序全局监听路由变化

小程序有一个API可以侦听全局路由跳转，官方文档里面没有但是可以使用。 wx.onAppRoute((res) > { console.log(路由监听,{res}) })

编程日记2024/08/02 04:40:00

c语言面向对象编程中的类_C ++中的面向对象编程

c语言面向对象编程中的类Object oriented programming, OOP for short, aims to implement real world entities like inheritance, hiding and polymorphism in programming. 面向对象的编程，简称OOP，旨在在编程中实现诸如继承，隐藏和多态性…

编程日记2024/08/02 04:30:00

Maven build标签

前言： <build >设置，主要用于编译设置 1.分类在Maven的pom.xml文件中，存在如下两种<build>： （1）全局配置（project build） 针对整个项目的所有情况都有效 （2…

编程日记2024/08/02 04:20:00

Ant Design Vue 表格内编辑（附完整源码及效果图）

效果图： 实现关键代码就是表单的 columns 属性对象下标的 scopedSlots： scopedSlots: {customRender: } 实现完整代码： <template><div><div class"table-wrapper"><!--每个列的宽度必须比列名总长度大才能…

编程日记2024/08/02 04:10:00

shell基本用法

#!/bin/bash #使用哪个shell执行echo "hello world" username"tom" echo $username#chmod x ./test.sh 设置可以执行文件#for循环输出 for skill in Ada Coffe Action Java; doecho "I am good at ${skill}Script" done #for file in ls /etc; d…

编程日记2024/08/02 04:00:00

brad wu_一百万归功于Brad Traversy

brad wuBrad Traversy is one of the most appreciated web development teachers on YouTube and he is getting close to 1 Million subscribers. We decided to help him reach this goal by the end of 2019.布拉德特拉弗西 ( Brad Traversy)是YouTube上最受赞赏的网络开发…

编程日记2024/08/02 03:50:00

CSS常见布局解决方案

最近要准备移动端项目，大半年没好好写过CSS了，今天恶补了一下CSS的一些布局，下面做一些分享。水平居中布局 1.margin 定宽 <div class"parent"><div class"child">Demo</div> </div><style…

编程日记2024/08/02 03:40:00

java.io.EOFException java.io.ObjectInputStream$PeekInputStream.readFully 错误

omcat 启动时报以下错误: java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully 错误这个错误碰到好几次了，我的tomcat使用非常频繁，而且部署项目比较多，经常会出一些自己看不懂的问题， 今天解决了这…

编程日记2024/08/02 03:30:00

SQL替换字段中部分字符

示例： tb_item表中image字段中一数据为：jd/4ef8861cf6854de9889f3db9b24dc371.jpg update tb_item set image replace(image,jd,taobao); 替换后: taobao/4ef8861cf6854de9889f3db9b24dc371.jpg

编程日记2024/08/02 03:20:00

flexbox_Flexbox中的Flex基础属性

flexbox弹性基础 (Flex Basis) The flex-basis property defines the size of the flex-item along the main axis of the flex container. The main axis is horizontal if flex-direction is set to row and it’ll be vertical if the flex-direction property is set to co…

编程日记2024/08/02 03:10:00

Vue 过渡组件，可实现组件或者页面的动画过渡或者css过渡

过渡的类名

相关文章：

解释型和编译型编程语言_解释型和编译型编程语言：有什么区别？

Beta 冲刺（1/7）

Vue全局路由侦听beforeEach路由守卫附代码使用示例

Debug模式下加载文件，运行程序异常的慢

如何在Python中对字符串进行子字符串化

HttpPost导包遇到的问题

真相也许是这样

微信小程序全局监听路由变化

c语言面向对象编程中的类_C ++中的面向对象编程

Maven build标签

Ant Design Vue 表格内编辑（附完整源码及效果图）

shell基本用法

brad wu_一百万归功于Brad Traversy

CSS常见布局解决方案

java.io.EOFException java.io.ObjectInputStream$PeekInputStream.readFully 错误

SQL替换字段中部分字符

flexbox_Flexbox中的Flex基础属性

OpenStack之虚拟机热迁移

软件工程概论个人作业02

前端开发学习常用网站网址及介绍（都是免费的）

sql语句语法多表关联_SQL Delete语句-如何删除行或表，语法示例

数据库大数据访问及分区分块优化方案

每周算法讲堂 floyd

小程序云开发常用语句宝库

初学api测试_面向初学者的API-在此免费视频课程中学习如何使用API

整理Simple.Data使用方法

css3之border-radius理解

deepLink iOS 应用到自己APP 记录

小程序 reduce_使用reduce制作的10个更多实用程序功能

洛谷1216 数字三角形