<!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. plsql exception

    EXCEPTION aligns with BEGIN ... END blocks. There is no BEGIN inside your loop, so there should be n ...

  2. Codeforces 1195E. OpenStreetMap （单调队列）

    题意:给出一个n*m的矩形.询问矩形上所有的a*b的小矩形的最小值之和. 解法:我们先对每一行用单调栈维护c[i][j]代表从原数组的mp[i][j]到mp[i][j+b-1]的最小值(具体维护方法是 ...

  3. python 环境变量的配置

    1. 打开python安装目录 2.将python.exe重名为python3.exe 3.在环境变量的path中,添加python3的目录 4.将pip.exe的目录页添加到path中,即可完成环境 ...

  4. linux IO模式以及select、poll、epoll详解

  5. 19.并发下的ArrayList、HashMap,Integer加锁问题

    import java.util.ArrayList; import java.util.Vector; /** * 并发下的ArrayList */ public class ArrayListMu ...

  6. 【JVM】Java 8 中的常量池、字符串池、包装类对象池

    1 - 引言 2 - 常量池 2.1 你真的懂 Java的“字面量”和“常量”吗? 2.2 常量和静态/运行时常量池有什么关系?什么是常量池? 2.3 字节码下的常量池以及常量池的加载机制 2.4 是 ...

  7. Hibernaate 详解

    hibernate.cfg.xml 连接数据库: connection.username 数据库的名称.这是我自己的是luwei connection.password 数据库的密码 luwei co ...

  8. 编译php-5.5.15出错，xml2-config not found

    今天在centos上编译php-5.5.15, cd php-5.5.15 ./configure --prefix=/usr/local/php/ --with-config-file-path=/ ...

  9. RealsenseD415/D435深度相机常用资料汇总

    1.Realsense SDK 2.0 Ubuntu 16.04 安装指导网址https://github.com/IntelRealSense/librealsense/blob/master/do ...

  10. prototype、proto和constructor 关系

    记录: 1.构造函数:如下,Foo()就是一个构造函数 function Foo(){} 2.prototype:每一个构造函数都有一个属性叫prototype,相当于一个指针,指向它的原型对象 Fo ...