一:二者的对比

1.动画循环就用animation。在animation中有一个animation-iteration-count属性可以定义循环次数。transition是执行一次以后就不会执行,但是可以通过transitionEnd事件添加循环,与animation相比animation更加简单明了。

2.自动触发用animation。当页面中的动画是自己执行的那么我们考虑用animation,因为transition是需要借助伪类、js、@madia触发的。常见的伪类是:hover ,:focus。 常见的js就比如click事件。@media可以用于页面缩小到1000px你可以展示你需要的动画。

3.复杂的动画用animation。在遇到很复杂的动画那就用animation。因为animation可以定义关键帧。那你就可以控制每一帧的动画效果。简单的动画效果可以用transition,里面有transition-timing-function属性可以展示动画的速度效果。

二.用transition实现Vue动画

1.在目标元素外包裹<transition name="xxx">

<div id="test">
<button @click="isShow=!isShow">toggle</button>
<transition name="xxx">
<p v-show="isShow">hello</p>
</transition>
</div>

2.定义class样式

指定过渡样式

 /*显示、隐藏时的过渡效果*/
.xxx-enter-active,.xxx-leave-active{
transition: opacity 1s;
}

隐藏样式

/*隐藏时的样式*/
.xxx-enter,.xxx-to{
opacity: 0;
}

transition和animation的用法基本相同,但一般在项目中transition用的以较多

.xxx-enter-active{
animation: bounce-in .5s;
}
.xxx-levave-active{
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
10%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}

Vue中transition和animation的使用的更多相关文章

  1. vueX、vue中transition的使用、axios

    引入一篇好文章链接:看一遍就会的vuex文章;完!!! vue中transtion的使用:transition文章;完!!! axios的文章:axios;完!!!

  2. css3中transition和animation的回调处理

    弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬_┬)看来还是要再接再励啊w(゚Д゚)w 言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transit ...

  3. vue中 transition组件使用总结

    博客园比较啃爹啊,随笔只能手写,之前写在有道云笔记里面的内容也复制不了,忧伤..... 长话短说,看官方的transition 的讲解,可能是内容太多了,或者就是本人太辣鸡了,看的有点懵逼,但是项目中 ...

  4. 终于不再对transition和animation,傻傻分不清楚了 --vue中使用transition和animation

    以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition ...

  5. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  6. vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  7. Vue中过度动画效果应用

    一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...

  8. Vue 中的动画特效

    Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. 内置组件 && vue中强大的缓存机制之keep-alive

    vue中强大的缓存机制之keep-alive 最近在用vue做项目,在切换页面时发现切换回原来的页面无法保存原来的状态. 如A页面需要ajax请求数据,然后切换到B页面做某些事情,再切换回A页面时,A ...

随机推荐

  1. fiddler -- 一个强大的抓包工具

    一.fiddler常用功能: 1. Fiddler 是位于客户端和服务器端的http代理,也是目前最常用的http抓包工具之一.它能够记录客户端和服务器之间的所有http请求,可以针对特定的http请 ...

  2. Javabean介绍

    1.javabean简介 JavaBean 是一种JAVA语言写成的可重用组件.为写成JavaBean,类必须是具体的和公共的,并且具有无参数的构造器.JavaBean 通过提供符合一致性设计模式的公 ...

  3. Oracle扩展的统计信息

    我们在收集列的统计信息与直方图时,往往都是对某一列的收集.当谓词使用多个相关列时,会导致约束条件的冗余.这几个相关的列也被称作关联列.出现这种情况时,查询优化器也会做出不准确的判断.所以我们必须对这些 ...

  4. json转换字符串

    在使用json模块时需要先 import json 引入模块 json.dumps()模块函数 功能:将Python数据类型转换成字符串[有参] 使用方法:json.dumps(要转换的数据类型变量) ...

  5. 老男孩Python九期全栈学习笔记4

    ---恢复内容开始--- day4 1.作业回顾 1.有变量name = 'aleX leNb',完成如下操作: 1)移除 name 变量对应的值两边的空格,并输出处理结果 2)移除 name 变量左 ...

  6. BinDiff安装使用教程

    一.说明 大概一两年前在<漏洞战争:软件漏洞分析精要>听到bindiff(和补丁比较法),但一直都没去使用.前两天再回头看书感觉需要使用一翻,整个过程下来还是遇到了一些问题,值得记录一番. ...

  7. 学号 2018-2019-20175212 童皓桢《Java程序设计》第5周学习总结

    学号 2018-2019-20175212 <Java程序设计>第5周学习总结 教材学习内容总结 接口 声明接口: interface 名字: 接口体:接口体中只有常量无变量,只有抽象方法 ...

  8. css给html添加效果

    <!doctype html> <html> <head> <title>EasyMall注册界面</title> <meta htt ...

  9. springboot based 主从数据源中间件方案

    先定几个原则/目标: 原则: 1.必须保证数据逻辑的一致性: 反例:刚写了数据,(因为主从延迟)查询不到: 2.对开发人员透明,对业务代码无侵入性:与单数据源的业务代码调用一致: 反例:对已有业务代码 ...

  10. 关于Struts2中 Action 配置method的解读

    为Action配置method属性: 将Action类中的每一个处理方法都定义成一个逻辑Action方法. <!DOCTYPE struts PUBLIC "-//Apache Sof ...