一:二者的对比

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. d3.event=null

    d3功能奇多, 已经模块化,(其实感觉和react差不多了). 所以默认打包的单个文件 <script src="https://d3js.org/d3.v5.min.js" ...

  2. c++中的回调

    一:设置一个函数指针,在需要使用的时候调用 #include <iostream> typedef void (__stdcall *DownloadCallback)(const cha ...

  3. hive参数配置详细

    hive.exec.mode.local.auto 决定 Hive 是否应该自动地根据输入文件大小,在本地运行(在GateWay运行) true hive.exec.mode.local.auto.i ...

  4. Batchnorm

    Internal Covariate Shift:每一次参数迭代更新后,上一层网络的输出数据经过这一层网络计算后,数据的分布会发生变化,为下一层网络的学习带来困难(神经网络本来就是要学习数据的分布,要 ...

  5. Linux之redis-cluster(集群配置)

    redis-cluster配置   为什么要用redis-cluster 1.并发问题 redis官方声称可以达到 10万/每秒,每秒执行10万条命令假如业务需要每秒100万的命令执行呢? 2.数据量 ...

  6. React文档(二十四)高阶组件

    高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...

  7. 脚本语言 ES

    C# 编写,解释执行,语法类似 JS,动态类型,支持闭包,支持热更新,效率比较低,目前暂时没有发现 BUG,实际游戏运行稳定,没有发现内存泄漏 Github:https://github.com/ea ...

  8. 169. Majority Element求众数

    网址:https://leetcode.com/problems/majority-element/ 参考:https://blog.csdn.net/u014248127/article/detai ...

  9. 点击button会自动刷新页面

    如题 因为button标签按钮会提交表单. 解决方法如下: 1.将<button></button>改为<input type="button"> ...

  10. Laravel 利用中间件控制权限。

    1.把所有需要控制的url写到config/admin.php里. 2.http/kernel.php文件里加上中间件. 3.http/Middleware/Permission.php 4.视图层