<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>Vue中的动画</title>

         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">

         <style>

             .fade-enter,

             .fade-leave-to {

                 opacity: 0;

             }

             .fade-enter-active,

             .fade-leave-active {

                 transition: opacity 3s;

             }

         </style>

     </head>

     <body>

         <div id="app">

             <!--1.设置appear  appear-active-class设置页面初次打开时的动画

                 2.animated的动画时长为1s, 过渡时长为3s,

                 在transition标签里设置type="transition"则以transition的时间为准

                 3.或者时长自定义：在transition标签设置:duration='10000'，动画时长即为10s,

                 enter和leave时间可以分开设置:duration='{enter: 5000, leave: 10000}'

             -->

             <transition

                 name="fade"

                 appear

                 :duration='10000'

                 enter-active-class="animated swing"

                 leave-active-class="animated shake"

                 appear-active-class="animated swing">

                 <div v-if="show">hello world</div>

             </transition>

             <button @click="handleBtnClick">change</button>

         </div>

         <!-- 开发环境版本，包含了用帮助的命令行警告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script type="text/javascript">

             var app = new Vue({

                 el: '#app',

                 data:　{

                     show: true

                 },

                 methods: {

                     handleBtnClick: function() {

                         this.show = !this.show;

                     }

                 }

             })

         </script>

     </body>

 </html>

vue 同时使用过渡和动画的更多相关文章

  1. 在vue中同时使用过渡和动画

    在上次的动画中,在显示和隐藏有动画效果,但是,刷新页面的时候,第一次的显示没有动画效果 需求:刷新页面的时候也有动画效果 <transition name='fade' appear enter ...

  2. vue的过渡和动画

    简单过渡 .fade-enter-active, .fade-leave-active { transition: all .5s; } /*.fade-enter, .fade-leave-to { ...

  3. Vue的过渡或动画

    一.过渡的类名 在进入/离开的过渡中,共有6种class进行切换,分别是v-enter,v-enter-active,v-enter-to,v-leave,v-leave-active,v-leave ...

  4. Vue——关于css过渡和动画那些事

    1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...

  5. Vue API 4 (过渡和动画）

    transition name 用于自动生成 CSS 过渡类名.例如:name: fade 将自动拓展为 .fade-enter ,.fade-enter-active等.默认类名为 "v& ...

  6. Vue过渡和动画效果展示（案例、GIF动图演示、附源码）

    前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...

  7. Vue使用过渡类名实现动画和自定义前缀

    Vue使用过渡类名实现动画和自定义前缀 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> ...

  8. VUE：过渡&动画

    VUE:过渡&动画 vue动画的理解 1)操作css的 trasition 或 animation 2)vue会给目标元素添加/移除特定的class 3)过渡的相关类名 xxx-enter-a ...

  9. Vue过渡与动画

    通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡 ...

随机推荐

  1. 深入理解java虚拟机:笔记

    1.运行时数据区域 1.程序计数器 当前线程执行字节码的行号指示器,字节码解释器工作通过改变这个计数器的值来选取下一条需要执行的字节码指令,每一个线程拥有独立的程序计数器,线程私有的内存 2.虚拟机栈 ...

  2. php操作redis--生存时间篇

    常用函数:expireAt,expire,ttl 应用场景:登陆生效时间,验证码有效时间等 设置某个键的有效时间,如当天有效(以时间戳的方式设置) $expireTime = mktime('23', ...

  3. 4K超清，2500万人在线，猫晚直播技术全解读

    摘要: 作为双11的必备节目,今年的猫晚通过优酷.浙江卫视.东方卫视进行了全程网络直播和电视直播,吸引了超过全球超过2.4亿人收看.猫晚期间,优酷基于阿里云最新的广播级高可靠直播方案,为近2500万的 ...

  4. 洛谷 P2522 [HAOI2011]Problem b （莫比乌斯反演+简单容斥）

    题目描述 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. 输入输出格式 输入格式: 第一行一个整数 ...

  5. PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题

    PHP CURL与file_get_contents函数都可以获取远程服务器上的文件保存到本地,但在性能上面两者完全不在同一个级别,下面我先来介绍PHP CURL或file_get_contents函 ...

  6. 《一头扎进》系列之Python+Selenium框架实战篇7 - 年底升职加薪，年终奖全靠它！Merry Christmas

    1. 简介 截止到上一篇文章为止,框架基本完全搭建完成.那么今天我们要做什么呢????聪明如你的小伙伴或者是童鞋一定已经猜到了,都测试完了,当然是要生成一份高端大气上档次的测试报告了.没错的,今天宏哥 ...

  7. JS-监听整个页面上的DOM树变化

    # [在线预览](https://jsfiddle.net/1010543618/fyf913t0/) ## 方法 - 使用<Web API 接口>的<MutationObserve ...

  8. openlayers中单击获取要素

    openlayers中单击获取要素 分类专栏: GIS 总结 OpenLayers   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...

  9. PHP错误检测

    开发的时候,我们有时候需要打开错误信息.这时候,可以在php文件里设置:ini_set('display_errors','on');error_reporting(E_ALL); 不过有时候我们及时 ...

  10. 使用 U 盘装个 winXP 原版镜像玩红警

    winXP 自身是不支持 U 盘启动的,所以用 poweriso 直接制作的 U 盘是没用的 可以使用 wintoflash 操作,下载地址: https://wintoflash.en.softon ...