<!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. 【串线篇】idea下的springboot入门配置

    1.Spring Boot 简介 简化Spring应用开发的一个框架: 整个Spring技术栈的一个大整合: J2EE开发的一站式解决方案: 2.微服务 2014,martin fowler 微服务: ...

  2. Python3.5-20190506-廖老师-自我笔记函数

    函数就是将你的代码封装起来,可以重复利用.不需要每次就写重复的代码 def 函数名(位置参数,默认参数=10,可变参数,关键字参数): 代码块 return 值 定义函数时,需要确定函数名和参数个数: ...

  3. Charles IOS https抓包

    步骤 1.下载charles: https://www.charlesproxy.com/download/ 只有一个30天试用版,每次打开只能30分钟,如果想时间长点,就找破解版或者买个licenc ...

  4. boost regex expression

    Boost.Regex provides three different functions to search for regular expressions 1. regex_match #inc ...

  5. 存储过程中的in out in out 三种类型的参数

    in 是参数的默认模式,这种模式就是在程序运行的时候已经具有值,在程序体中值不会改变. out模式定义的参数只能在过程体内部赋值,表示该参数可以将某个值传递回调用他的过程 in out 表示高参数可以 ...

  6. LA 3971 Assemble（二分）

    题目: 给你b元钱,让你组装一台电脑,有n个配件,属性有 种类 名字 价格 品质,每种类型选至少一个,并且最小品质最大.输出这个最大的最小品质. 白书上说了,最小值最大的问题一般是二分来求解答案.在这 ...

  7. 2019ccpc秦皇岛/Gym102361 F Forest Program 仙人掌上dfs

    题意: 某地沙漠化严重,沙漠里长了很多仙人掌,现在要让你删掉仙人掌的一些边让它的所有连通分量都是树,就完成了沙漠绿化(什么鬼逻辑?)让你计算删边的方案数. 仙人掌是一种特殊的图,它的每一条边只属于1或 ...

  8. mysql 自动加上编号

    SELECT (@i:=@i+1) i,user_id,user_name FROM dt_user_all_orders, (SELECT @i:=0) as i

  9. SQLserver服务无法启动

    今天调整了一下sqlserver tcp/ip 网络协议,重启生效时,SQLserver服务无法启动. 搞了一天都没发现问题,准备重装,发现也比较麻烦.看了日志,网上查了一堆解决方案,均没有. 后台发 ...

  10. EmWin 如何显示汉字 不用在文件中使用编码

    1. Font Converter for emWin 生成C文件字库 1.1 新建文件 1.2 选择字体 1.3 为了减小C文件体积,这里只加入自己需要的汉字,先把所有字体取消选择. 1.4 新建一 ...