代码编织梦想

大家好,我是VHotDog,热狗得小舔狗!

最近看一个项目源码时,竟然发现这一篇我竟然没有看,竟然不知道,不知道!!!

然后我就去官网康了一下。他是这亚子说的

概述

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库,如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库,如 Velocity.js

过渡效果大家都晓得吧。
CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。

css3过渡简写属性:transition: 用于过渡的属性 时间 速度变化效果 延迟时间;

不过呢,嘿嘿。Vue帮我们封装好了!!

过渡

Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡.
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<style>
	.dog-enter-active, .dog-leave-active {  // vue提供的过度类名。下面会讲
	  transition: opacity .5s;
	}
	.dog-enter, .dog-leave-to {
	  opacity: 0;
	}
</style>

<body>
    <div id ="app"> 
       <button v-on:click="show = !show"> // 点击时,show值会true false变换
			按钮
		  </button>
		<transition name="dog">  // 自己定义的名称哦
			<p v-if="show">hello vue</p>
		 </transition>
    </div>

</body>
    <script>
     //创建Vue实例,得到 ViewModel
     let vm = new Vue({
        el: '#app',
        data: {
			show: true
        },
        methods: {}
     });
    </script>
</html>

可以实现点击多次”按钮“时,下面文字(hello vue)'淡入淡出’的效果。

过渡类名

在进入/离开的过渡中,会有 6 个 class 切换。(下面的v是默认的前缀)
opacity(透明度)
在这里插入图片描述

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

如果你使用一个没有名字的 ,则 v- 是这些类名的默认前缀。如果你使用了 ,那么 v-enter 会替换为 dog-enter。

动画

动画和过渡的用法相同,区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除。

css3动画简写属性:animation 绑定的keyframe名 花费时间 速度变化效果 延迟 播放次数 是否反向;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
	.dog-enter-active {
	  animation: move .5s;
	}
	.dog-leave-active {
	  animation: move .5s reverse;
	}
	@keyframes move {
	  0% {
		transform: scale(0);
	  }
	  50% {
		transform: scale(1.5);
	  }
	  100% {
		transform: scale(1);
	}
</style>

<body>
    <div id ="app"> 
       <button @click="show = !show">按钮</button>
  <transition name="dog">
    <p v-if="show">字数长一点,效果更好哦!!</p>
  </transition>
    </div>

</body>
    <script>
     //创建Vue实例,得到 ViewModel
     let vm = new Vue({
        el: '#app',
        data: {
			show: true
        },
        methods: {}
     });
    </script>
</html>

貌似有点生命周期那个味了呀。

transition属性介绍

name
用于自动生成 CSS 过渡类名。例如:name: dog将自动拓展为 .dog-enter ,.dog-enter-active等。默认类名为 “v”

appear
是否在初始渲染时使用过渡。默认为 false。

css
是否使用 CSS 过渡类。默认为 true。如果设置为 false,将只通过组件事件触发注册的 JavaScript 钩子。

type
指定过渡事件类型,侦听过渡何时结束。有效值为 “transition” 和 “animation”。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。

mode
控制离开/进入的过渡时间序列。有效的模式有 “out-in” 和 “in-out”;默认同时生效。

duration
指定过渡的持续时间。
可以用 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计):

    <transition :duration="1000">...</transition>

也可以定制进入和移出的持续时间:

    <transition :duration="{ enter: 500, leave: 800 }">...</transition>

注意

同时使用过渡和动画时,需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
因为浏览器并不知道使用的是animate的时长,还是transition的时长。假如整体使用transition的时长

    <transition  name="dog"  type='transition'">...</transition>

自定义过渡类名

官方说,可以通过以下 attribute 来自定义过渡类名,且他们的优先级高于普通的类名。

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

举个栗子:


```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
	/*用自定义类名书写效果*/
	.dog{
       transition: all .3s ease;
   }  
   /*等同于----->.v-enter-active {
	    animation: animatehere 1s;	}*/		
</style>

<body>
    <div id ="app"> 														
	  <transition  enter-active-class="dog" >
		<div  v-if='isdisplay'>hello Vue</div>
	  </transition>
	  
		<button @click="isdisplay=!isdisplay">
		按钮
		</button>
    </div>

</body>
    <script>
     //创建Vue实例,得到 ViewModel
     let vm = new Vue({
        el: '#app',
        data: {
			isdisplay: true
        },
        methods: {}
     });
    </script>
</html>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/Nan_gao_0/article/details/110728120

用Node.js实现邮件验证功能 带你节省邮件服务费-爱代码爱编程

用Node.js实现邮件验证功能 带你节省邮件服务费   开发过程中,不可避免的会遇到用户认证过程。而用户认证过程中,邮箱验证是对用户账号真实性验证的一个常用手段 但是,邮箱验证是部分收费功能。 因此,如果可以自我实现邮件收发功能是极好的。 下面,带大家用Node实现一下邮件收发功能。 首先 我们需要引入nodemailer模块// 引入模

vscode 调试 pm2( node.js )-爱代码爱编程

启动 app pm2 start --node-args="--inspect=9229" app.js --inspect=9229 设置调试端口为 9229 vscode里添加 launch.json 环境选择选 Node.js 即可 { "address": "127.0.0.1",

VueCli3.x全栈项目- node-express搭建服务器-爱代码爱编程

新建一个存放项目的文件夹cmd在控制台打开npm init初始化项目说明:在node开发中使用npm init会生成一个pakeage.json文件,这个文件主要是用来记录这个项目的详细信息的,它会将我们在项目开发中所要用到的包,以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包

vue 全家桶 - 前端工程化-爱代码爱编程

目录 主要内容1. 模块化相关规范1.1 模块化概述1.2 模块化规范A. 浏览器端的模块化B. 服务器端的模块化C. 大一统的模块化规范 – ES6模块化1.3 体验ES6模块化 - 在 NodeJS 中安装 babel1.3.1 安装 babelA. 安装 babelB. 创建 babel.config.jsC. 创建 index.js 文件D

Ubuntu20.04 构建并运行ONOS-爱代码爱编程

一、安装 Bazel 在 Ubuntu 上安装Bazel有以下几种方式: 通过 npm 安装npm install -g @bazel/bazelisk 这种方式需要安装 nodejs ,命令为 sudo apt install nodejs使用 Bazel 的 apt 仓库 步骤1:将 Bazel 发行版 URI 添加为包源sudo apt ins

nodejs web服务器创建-爱代码爱编程

1、引入http模块 let http = require(‘http’) 2、创建web服务 返回http对象 let app = http.createServer((req,res)=>{ req 请求体 浏览器->服务器 req.url 地址 提取地址栏数据 req.on('data') 提取非地址栏数据 所有

安装angular,出现长时间停留不成功-爱代码爱编程

场景说明: 我安装过一个版本的angular,启动项目的时候发现angular版本对不上,所以开始尝试更新,结果更新失败了. 我是删除重新安装,在重新安装过程中 fetchMetadata: sill fetchPackageMetaData error for @angular-devkit/core@11.0.3 多次尝试无果 解决方案: 注意如果

Angular学习之路(二)---组件概念-爱代码爱编程

在angular中,可以使用命令创建组件 命令如下 ng generate component <component-name> 命令中<component-name>为需要创建的组件的名称 创建成功后,组件文件结构如下:test-component.component.html为需要显示信息的html模板。内容如下:te

前端通用保存用户登录状态之“withCredentials“-爱代码爱编程

前端通用保存用户登录状态之"withCredentials" 标题阐述如何开放使用withCredentials开放证书当请求是post请求时,当请求为get请求时触发的问题及解决方式 标题阐述 在前端里面如何保存用户登录状态,即是难点也是一种非常常用的技术,通过判定用户的状态来开启部分功能或者全部功能。 常见的有: 浏览器的localSt

大厂是如何用DevCloud流水线实现自动化部署Web应用的?-爱代码爱编程

DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师。 官方网站:devui.design Ng组件库:ng-devui(欢迎Star) 官方交流:添加DevUI小助手(devui-official) DevUIHelper插件:DevUIHelper-LSP(欢迎Star)

ng-repeat循环数值重复问题-爱代码爱编程

这里写一个Angular.JS 里遇见的一个小问题,当做笔记吧 之前做Echarts 雷达图中要做打分功能 左边打分项要读出来 中间数值 右边 是雷达图 这样打分时候是没问题的 但是查看打分详情 ng-repeat 就出现了小问题 当我循环数组不同时显示的没错,后来再测一组数据想同时候就报错了。 然后再js循环输出也发现没问题,然后ng-repeat也

angular接收路由传来的值-爱代码爱编程

上篇文章提到了用路由(route)传值: https://blog.csdn.net/weixin_45158253/article/details/110821408 看下面也行(不用看上面的链接了) 这里写下如何接收路由传来的值 官网方法: 我的使用 当我使用这个方法时,并没有得到预期结果 路由配置: { path: