vue中的动画以及修改v-前缀

HTML页面元素

要为那个元素添加动画,就使用transition标签进行包裹并写样式进行控制

<transition>

<h3 v-if="falge">按钮控制元素h3的显示与隐藏</h3>

</transition>

当页面中有多个元素要添加动画,并且动画效果不一样时,可以给transition 添加一个name,来区分不同组之间的动画

<transition name="my">

<h6 v-if="falge2">按钮控制元素h6的显示与隐藏</h6>

</transition>

style样式

<style>

/* 写两个样式来控制元素的淡入淡出 */

/* 这是两个时间点,进入和离开的时间点 */

.v-enter,

.v-leaver-to{

opacity: 0;

transform: translateX(150px);

}

/* 这是两个时间段 */

.v-enter-active,

.v-leaver-active{

transition: all .8s ease;

}

 /*修改v-前缀之后的动画效果*/  /* my是自己自定义的前缀,要跟上面标签中的name名一致*/

/* 这里是控制h6的动画 */

.my-enter,

.my-leaver-to{

opacity: 0;

transform: translateY(150px);

}

.my-enter-active,

.my-leaver-active{

transition: all .8s ease;

}

</style>

原文地址:https://www.cnblogs.com/Progress-/p/12030660.html

时间: 2024-10-28 21:28:26

vue中的动画以及修改v-前缀的相关文章

05.vue中js动画与Velocity.js的结合

vue中js动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中js动画</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>

Vue 中的动画特效

Vue 中的动画特效 CSS 实现标签显隐 <!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-U

Vue中的动画效果

Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 下面分别从这个4个工具来学习Vue动画效果. 一.单元素/组件的过渡 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进

vue中css动画原理

显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition> 当一个元素被transition包裹了之后,vue会自动当分析元素的css样式,然后构建一个动画的流程,在动画即将被执行的一瞬间,vue会在内部标签上增加两个class名字,分别是fade-enter,fade-enter-active,在动画执行到第二帧的时候,也就是动画开始后,fade-enter

vue中使用动画vue-particles

1.下载依赖 npm install vue-particles --save-dev 2.main.js引入 import Vue from 'vue' import VueParticles from 'vue-particles' Vue.use(VueParticles) 3.直接使用 <vue-particles color="#dedede" :particleOpacity="0.7" :particlesNumber="80"

批量删除和修改特定前缀的mysql表

批量删除特定前缀的表 第一步:拼装sql语句 Select CONCAT( 'drop table ', table_name, ';' ) FROM information_schema.tables Where table_name LIKE 'CA_%'; 第二步:把红框中内容选中复制粘贴执行即可 小技巧:为了不选中竖杆(|),Alt+鼠标左键是列选中,这样就可以选中红框中的内容 批量修改表前缀 第一步:拼装sql语句 select concat('alter table ',table_

Vue学习之动画小结(六)

一.Vue中实现动画的方式:https://cn.vuejs.org/v2/guide/transitions.html Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 二.使用过渡类名实现动画: <!DOC

vue中如何实时修改输入的值

vue中如何实时修改输入的值 经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注.思来想去还是有必要了解一下. 操作方法 一直听说各种方式,记得最深的便是利用computed的计算属性,通过set 和 get 来进行修改,其他的也有所见闻.先实现一种,再进行其他其他深究,以及使用好坏. vue文档说明 对于需要使用输入法 (如中文.日文.韩文等) 的语言,你会发现 v-model 不会

vue中修改子组件样式

一.全局修改 1.在App.vue中设置,引入公共样式及个别页面的特殊样式common.css: 例如:<link rel="stylesheet" type="text/css" href="static/assets/css/common.css"> 下边的写法没用过参考链接中给的 <a href="http://home.cnblogs.com/u/134870/" target="_blan