1，vue动画的实现原理，主要是通过在不同时期给需要动画的dom元素加上css动画样式

我们以显示和隐藏动画为例

a, 需要动画的dom元素

b,点击时vue控制往vue中加的样式

2，  我们以两张图为例，更为清楚地表示vue什么时候往dom元素中加样式

点击按钮隐藏时

点击按钮逐渐显示时

如果您还是不理解，没关系，下面是代码，只要你对css3有一定了解，肯定能明白其中的原理（记住一定要引入vue文件）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
        <title>vue动画原理</title>
        <style>
            .fade-enter {
                opacity: 0;
            }
            .fade-enter-to{
                color: red;
            }
            .fade-enter-active {
                transition: opacity 2s;
            }
            .fade-leave{
                opacity: 1;
            }
            .fade-leave-to{
                opacity: 0;
            }
            .fade-leave-active{
                transition: opacity 2s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 动画名为fade所以 vue加的样式名（如.fade-enter）以fade开头，如果动画不命名，则vue默认样式以v开头（如 v-enter） -->
            <transition name="fade">
               <h1 v-if="type">nihao</h1>  
            </transition>
            <button @click="handle">点击切换</button>
        </div>
        <script>
            
            var vm = new Vue({
                el:'#app',
                data:{
                    type:true
                },
                methods:{
                    handle(){
                        this.type = !this.type;
                    }
                }
            })
        </script>
    </body>
</html>

vue动画及其原理的更多相关文章

  1. vue 动画原理 part1

    Vue动画原理 增加和删除css增加样式实现一个过渡效果也就是动画效果 1.需要动画效果的标签外包裹一个transition标签 会被自动分析css样式,然后自动构建一个动画流程 transition ...

  2. vue - Vue脚手架（终结篇）/ vue动画

    几天的内容不是很多,因为我们脚手架的学习告一段落了,也是为了跟明天开始的内容有一个区分. 明天将会有一个非常重要的内容来了,各位,vue中的ajax他来了,这个绝对是重量级,有点兴奋! 十一.TODO ...

  3. paip.关于动画特效原理 html js 框架总结

    paip.关于动画特效原理 html js 框架总结 1. 动画框架的来源:flex,jqueryui 3 2. 特效的分类 3 2.1. Property effects 动态改变一个或多个目标对象 ...

  4. 写多个物件css3循环动画案例原理

    div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: ...

  5. Android窗口管理服务WindowManagerService显示窗口动画的原理分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8611754 在前一文中,我们分析了Activi ...

  6. vue动画的用法

    vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就 ...

  7. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  8. Vue双向绑定原理，教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  9. 深度解析 Vue 响应式原理

    深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...

随机推荐

  1. hadoop源码分析(2)：Map-Reduce的过程解析

    一.客户端 Map-Reduce的过程首先是由客户端提交一个任务开始的. 提交任务主要是通过JobClient.runJob(JobConf)静态函数实现的: public static Runnin ...

  2. 【安富莱二代示波器教程】第6章 示波器设计—双通道ADC驱动

    第6章        示波器设计—双通道ADC驱动 本章节为大家讲解示波器的ADC驱动,采用STM32自带ADC实现.关于STM32F429的ADC,可以说处处有地雷,不小心就踩上了,如果简单的使用, ...

  3. css清除浮动的3种方式

    前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动 ...

  4. [Swift]LeetCode415. 字符串相加 | Add Strings

    Given two non-negative integers num1 and num2 represented as string, return the sum of num1 and num2 ...

  5. Android studio使用过程中错误的解决方法

    错误一:No such property: POM_DESCRIPTION for class: org.gradle.api.publication.maven.internal.pom 刚开始出现 ...

  6. mybatis 批量更新 Parameter '__frch_item_0' not found. Available parameters are [list]

    一次在做批量更新数据的时候报错 Parameter '__frch_item_0' not found. Available parameters are [list] 记过反复查找,最后才发现是一个 ...

  7. 记一次令人窒息的线上fullgc调优

    今天第二篇采坑了... ... 现场因为处理太急促没有保留,而且是一旁协助,没有收集到所有信息实在是有些遗憾...只能靠记忆回想一些细节 情况是一台服务器一启动就开始full gc,短短1分钟可以有几 ...

  8. github pages绑定域名

    网上很多人问 github 绑定域名要不要备案,很多人的回答是: 国内主机需要备案,国外主机不用 这个说法是没错的,但是却没有直接回答出 github pages 是否需要备案! 首先声明 githu ...

  9. docker for mac 创建私有仓库

    拉取镜像 docker pull registry 运行registry run -d -p : -v /Users/huangenai/docker/registry:/var/lib/regist ...

  10. 【转】getopt模块，实现获取命令行参数

    python中 getopt 模块,该模块是专门用来处理命令行参数的 函数getopt(args, shortopts, longopts = []) 参数args一般是sys.argv[1:],sh ...