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. go 使用 c接口

    在使用go语言时, 有时为了方便可以直接调用c语言的接口与库, 不需要重复编写. 那就来说说在go语言里面如何调用c的接口 首先编写好c语言的源文件与头文件,这里举一个简单的例子,实现一个字符串大小写 ...

  2. JAVA小白开发环境配置（编译器为Idea）

    JDK配置 1.首先到官网下载最新版JDK:Oracle官网下载 Accept License Agreement–>下载适合自己pc版本的jdk(此处以64位windows为例.x86是32位 ...

  3. Dubbo工作原理，集群容错，负载均衡

    Remoting:网络通信框架,实现了sync-over-async和request-response消息机制. RPC:一个远程过程调用的抽象,支持负载均衡.容灾和集群功能. Registry:服务 ...

  4. JAVA四类八种基本数据类型

    boolean类型 Boolean在内存中占用一个字节. 当java编译器把java源代码编译为字节码时,会用int或byte来表示boolean.在java虚拟机中,用整数零来表示false,用任意 ...

  5. [Swift]LeetCode119. 杨辉三角 II | Pascal's Triangle II

    Given a non-negative index k where k ≤ 33, return the kth index row of the Pascal's triangle. Note t ...

  6. [Swift]LeetCode282. 给表达式添加运算符 | Expression Add Operators

    Given a string that contains only digits 0-9 and a target value, return all possibilities to add bin ...

  7. [Swift]LeetCode546. 移除盒子 | Remove Boxes

    Given several boxes with different colors represented by different positive numbers. You may experie ...

  8. [Swift]LeetCode976. 三角形的最大周长 | Largest Perimeter Triangle

    Given an array A of positive lengths, return the largest perimeter of a triangle with non-zero area, ...

  9. 老司机教你用原生JDK 撸一个 MVC 框架！！！

    其实 Spring MVC 是一个基于请求驱动的 Web 框架,并且也使用了前端控制器模式来进行设计,再根据请求映射规则分发给相应的页面控制器进行处理,具体工作原理见下图. 在这里,就不详细谈相关的原 ...

  10. 【Scala篇】--Scala初始与基础

    一.前述 Scala是基于JVM的另一个语言. Scala官网6个特征. 1).Java和scala可以混编 2).类型推测(自动推测类型) 3).并发和分布式(Actor) 4).特质,特征(类似j ...