前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue同时使用transition(过渡)和animate.css(动画库)

Vue同时使用transition(过渡)和animate.css(动画库)

作者头像
十月梦想
发布于 2018-10-09 07:22:56
发布于 2018-10-09 07:22:56
3.9K03
代码可运行
举报
文章被收录于专栏:十月梦想十月梦想
运行总次数:3
代码可运行

动画库和过渡我们都简单介绍了如何单独使用!那么一起使用其实就是两者结合

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="app">
    <transition
            type="transition"
            appear
            enter-active-class="animated swing active"
            leave-active-class="animated bounceOutDown leave"
            appear-class="animated swing"
            :duration="{enter:3000,leave:5000}"
    >
        <p v-if="show">Hello World</p>
    </transition>
    <button @click="toggle">切换</button>
</div>
<script>
    var app=new Vue({
            el:"#app",
            data:{
                show:true
            },
            methods:{
                toggle:function(){
                    this.show=!this.show;
                }
            }

        })
</script>

添加过渡样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.v-enter,.v-leave-to{
    opacity: 0;
    color: #000;
}
.active,.leave{
    color:deepskyblue;
    transition: all 3s;
}

给定不同状态是的css,实现过渡

    解决第一次出现没有动画新增apper属性点添加apper-active-class,同时使用过渡和动画,可以在class中新增过渡的calss,v-enter-active,v-leave-active,动画时间以哪个为准可以设置tyep=animation或者transition,也可以自定义动画时长,:duration传入数字(ms)或者传入对象enter和leave分别时长,

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-9-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue2使用过渡标签transition使用动画
【给来和走的样式的名字定义为 v-enter-active | v-leave-active,设置name的值,需要把v 改成它】
打不着的大喇叭
2024/03/11
2730
Vue2使用过渡标签transition使用动画
Vue使用animation.css动画库
由于使用第三方库,需要使用指定class,所有要之定义class值,使用enter-active-class和leave-active-class,必须包括animated和动画名称!
十月梦想
2018/10/09
2.4K0
Vue教程(动画-基础入门)
  在我们显示的页面中动画对于我们来说虽然不是必须的,但是必要的一些动画效果能够提高用户的体验,帮助用户更好的理解页面中的功能。所以本文就来给大伙介绍下动画的基础内容。
用户4919348
2019/07/22
1.2K0
Vue动画封装的两种方式
    js方式我们需要引入之前的velocity.js,所需属性放入tempalate中,在模板的插槽中定义动画三个状态!
十月梦想
2018/10/09
1.2K0
33.Vue-使用第三方animate.css类库实现动画
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 包括以下工具:
Devops海洋的渔夫
2020/05/04
6.9K0
Vue使用过渡类名实现动画和自定义前缀
1.效果演示 image 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti
Dream城堡
2018/12/04
5150
Vue使用过渡类名实现动画和自定义前缀
js之Vue 过渡组件,可实现组件或者页面的动画过渡或者css过渡
使用过渡效果,可以优化用户体验,Vue给我们封装了一个很好用的组件,专门用来处理过渡效果,下面我们来看看怎么使用它;
IT工作者
2022/05/17
1.2K0
Vue过渡动画实现
可以给transition添加一个name,如果name为"fade",则class前缀为指定的name
十月梦想
2018/10/09
1.1K0
Vue过渡动画实现
Vue-transition组件的Css动画+过渡(1)入门,笔记总结 “建议收藏”
这里说一下transition: property duration timing-function delay; 一共有四个参数可选;
玖柒的小窝
2021/09/29
1.6K0
【Vue3 从入门到实战 进阶式掌握完整知识体系】021-Vue中的动画:组件和元素切换动画的实现
訾博ZiBo
2025/01/06
1070
【Vue3 从入门到实战 进阶式掌握完整知识体系】021-Vue中的动画:组件和元素切换动画的实现
从零开始学 Web 之 Vue.js(五)Vue的动画
在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
Daotin
2018/09/30
1.4K0
从零开始学 Web 之 Vue.js(五)Vue的动画
Vue 动画与脚手架
Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
RiemannHypothesis
2022/11/05
4440
Vue 动画与脚手架
Vue transition动画
官网 API: https://cn.vuejs.org/v2/guide/transitions.html
chuchur
2022/10/25
5740
十一.Vue过渡动画
本文最后更新于 870 天前,其中的信息可能已经有所发展或是发生改变。 1. 使用过渡类 <style> .v-enter,.v-leave-to{ opacity: 0; transform: translateX(200px) } .v-enter-active,.v-leave-active{ transition: all 0.8s ease } </style> <transition> <h1 v-if="flag">Hello</h1> </tra
Yuyy
2022/06/28
6460
vue2 笔记8动画
样例解析 <template> <div class="hello"> <button @click="show1 = !show1">show</button> <!-- 使用transition标签,会在动画的对应阶段给包裹的元素添加、删除相应的样式 --> <!-- appear 使得元素在创建时就使用动画显示 --> <transition appear> <h1 v-show="show1">Hello World</h1> </transi
路过君
2022/04/13
3210
transition过渡&动画
需要设置动画的元素或组件要在外边包裹一个<transition>标签,设置自定义的name,vue会根据元素的切换(进入/离开)过程添加相应的css类名,你可以自由地使用css类名来设置css过渡&动画。
小小杰啊
2022/12/21
9110
Vue.js 过渡
实例中通过点击 "点我" 按钮将变量 show 的值从 true 变为 false。如果为 true 显示子元素 p 标签的内容。
陈不成i
2021/07/27
2.8K0
Vue 04.过渡&动画
animated 类可以加在被包裹的标签或transition类中 ,加在transition类中时需要加在每一个class中
LittlePanger
2020/04/14
8970
vue动画
v-enter    【这是一个时间点】 是进入之前,元素的起始状态,此时还没有开始进入
砖业洋__
2023/05/06
6890
vue动画
vue基础(三)
除了 vue-resource 之外,还可以使用 axios 的第三方包实现实现数据的请求 1. 之前的学习中,如何发起数据请求? 2. 常见的数据请求类型? get post jsonp 3. 测试的URL请求资源地址: + get请求地址: http://www.liulongbin.top:3005/api/get + post请求地址:http://www.liulongbin.top:3005/api/post + jsonp请求地址:http://www.liulongbin.top:3005/api/jsonp 4. JSONP的实现原理 + 由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口,浏览器认为这种访问不安全; + 可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称作JSONP(注意:根据JSONP的实现原理,知晓,JSONP只支持Get请求); + 具体实现过程: - 先在客户端定义一个回调方法,预定义对数据的操作; - 再把这个回调方法的名称,通过URL传参的形式,提交到服务器的数据接口; - 服务器数据接口组织好要发送给客户端的数据,再拿着客户端传递过来的回调方法名称,拼接出一个调用这个方法的字符串,发送给客户端去解析执行; - 客户端拿到服务器返回的字符串之后,当作Script脚本去解析执行,这样就能够拿到JSONP的数据了;
不愿意做鱼的小鲸鱼
2022/09/24
5950
vue基础(三)
相关推荐
Vue2使用过渡标签transition使用动画
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验