动画-自定义 v-前缀|学习笔记

简介: 快速学习动画-自定义 v-前缀

开发者学堂课程【Vue.js 入门与实战动画-自定义 v-前缀】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8165


动画-自定义 v-前缀


一、v-前缀的使用方法以及前缀的作用

示例代码:

<title>Document</title>

<script src=" ./lib/vue-2.4.0.js"></script>

<!-- 2.自定义两组样式,来控制transition内部的元素实现动画-->

<style>

/* v-enter【这是一个时间点】是进入之前,元素的起始状态,此时还没有开始进入*/

/* v-leave-to 【这是一个时间点】是动画离开之后,离开的终止状态,此时,元素动画已经结束了*/

.v-enter,

.v-leave-to {   //特有的样式来实现动画

opacity : 0;

transform: translatex(150px);

}

/*v-enter-active【入场动画的时间段】*/

/* v-leave-active【离场动画的时间段】*/

.v-enter-active,

.v-leave-active{   //无论是h3或者是h6都是共用这个类

transition: all 0.8s ease;

</style>

</head>  

<body>

<div id="app">

<input type "button" value "toggle" Cclick="flag-!flag">

<!--需求:点击按钮,让h3 显示,再点击,让h3隐藏-->

<!-- 1,使用transition元素,把需要被动画控制的元素,包裹起来-->

<!-- transition元素,是Vue官方提供的-->

<tranaition>  //tranaition默认必须要带一个v-前缀

h3 v-if-"flag">这是一个H3</h3>

</ transition>

</div>

<hr>

<input type="button" value="toggle2" @click="flag=!flag2">

<transition>

h6 v-if-"flag2">这是一个H6</h6>

</transition>

</div>

<script>

//创建vue实例,得到viewModelvar  

var = new Vue({

el: '#app' ,

data:{

flag: false},  //flag控制上方h3

flag2:false  //flag2控制上方h6

methods:{}

});

</acript>

</body>

执行代码并打开网址展现如下效果:

点击 toggle 呈如下效果:“这是一个 H3”从右到左出现

1666937846978.jpg

再次点击 toggle,”这是一个H3”从左到右消失。

点击 toggle2:

“这是一个 H6”从右到左出现

1666937857688.jpg

再次点击 toggle2,”这是一个 H6”从左向右消失。

示例2:

//如果需要让flag2单独执行一个动画,则它与h3就无法公用一个类。

<tranaition name "my">

h6  v-if="flag2">这是一个H6</h6>

</ transition>

//前缀不再是v-,而是my-

.my-enter,

.my-leave-to {

opacity : 0;   //opacity还可以从0开始渐变

transform: translateY(70px);

}

.my-enter-active,

.my-leave-active{

transition: all 0.8s   ease;

}

点击 toggle2按钮,呈现以下效果:

“这是一个 H6”从下到上出现:

1666937868574.jpg

再次点击 toggle2,“这是一个 H6”从上到下消失。

前缀的作用:能够区分不同组织间的动画。

相关文章
|
12月前
|
移动开发 前端开发 小程序
浅谈-web屏幕适配的解决方案
浅谈-web屏幕适配的解决方案
172 0
浅谈-web屏幕适配的解决方案
|
7月前
|
算法 Java
算法系列之回溯算法求解数独及所有可能解
数独求解的核心算法是回溯算法。回溯算法是一种通过逐步构建解决方案并在遇到冲突时回退的算法。具体来说,我们尝试在空格中填入一个数字,然后递归地继续填充下一个空格。如果在某个步骤中发现无法继续填充,则回退到上一步并尝试其他数字。
204 11
算法系列之回溯算法求解数独及所有可能解
|
监控 前端开发 JavaScript
JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据
Navigator.sendBeacon 是一个用于发送少量数据到服务器的 API,尤其适用于在页面即将卸载时发送数据,如日志记录、用户行为分析等。 与传统的 AJAX 请求不同,sendBeacon 方法的设计目标是确保数据在页面卸载(例如用户关闭标签页或导航到新页面)时能够可靠地发送。 Navigator.sendBeacon 方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。 它主要用于将统计数据发送到 Web 服务器,同时避免了用传统技术(如:XMLHttpRequest)发送分析数据的一些问题。
401 1
|
人工智能 安全 算法
【平衡点:解锁中国大模型开源闭源的新时代】关于大模型是否开源的分析
本文探讨了开源与闭源软件在大模型技术发展中的角色,深入比较了两者在质量、安全、产业化、适应性和可靠性等方面的优缺点。开源软件得益于全球开发者社区,通常在创新和适应性上表现出色,但安全性和质量可能因分散的开发而有所波动。闭源软件则在代码质量和安全性上有一定优势,但可能限制了产业的协作与创新。 在商业模式方面,开源通常依赖服务和支持盈利,闭源则通过软件授权和订阅服务获利。开源模式的市场竞争更激烈,闭源模式则更注重市场份额和控制。企业需要根据自身情况选择合适的战略,有些可能会采用
519 1
|
机器学习/深度学习 自然语言处理 图形学
CVPR 2024:文本一键转3D数字人骨骼动画,阿尔伯塔大学提出MoMask框架
【5月更文挑战第12天】CVPR 2024将展出阿尔伯塔大学的MoMask框架,该框架创新性地将文本转化为3D数字人骨骼动画,推动计算机图形学和动画制作的发展。MoMask结合NLP和计算机视觉,由文本编码器解析输入文本,动作生成器则将其转化为骨骼动画。该技术提升动画制作效率,降低门槛,但面临训练数据需求大和生成动画可能有偏差的挑战。[论文链接](https://arxiv.org/abs/2312.00063)
377 2
|
弹性计算 大数据 测试技术
阿里云服务器租用费用价格表(2024新版报价)
2024年阿里云服务器租用费用价格表更新,云服务器ECS经济型e实例2核2G、3M固定带宽99元一年、ECS u1实例2核4G、5M固定带宽、80G ESSD Entry盘优惠价格199元一年,轻量应用服务器2核2G3M带宽轻量服务器一年61元、2核4G4M带宽轻量服务器一年165元12个月、2核4G服务器30元3个月,幻兽帕鲁4核16G和8核32G服务器配置,云服务器ECS可以选择经济型e实例、通用算力u1实例、ECS计算型c7、通用型g7、c8i、g8i等企业级实例规格。今天分享阿里云服务器租用费用最新报价:
236 0
|
Go
go:快速升级Go版本,我几分钟就解决了
go:快速升级Go版本,我几分钟就解决了
5599 0
go:快速升级Go版本,我几分钟就解决了
《快递行业云上技术服务白皮书》——3. 快递业务介绍——3.4 快递业务核心系统分析
《快递行业云上技术服务白皮书》——3. 快递业务介绍——3.4 快递业务核心系统分析
277 0
|
XML Java 数据格式
Spring源码(二-3)-XML文件的读取-factory-method的使用
Spring 可以通过 factory-method 实例化对象。factory-method方式是 Spirng 实例对象的方式之一。
1095 2