<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用animation与transform实现vue的动画效果</title>

    <script src="vue.js"></script>

</head>

<body>

<div id="hdcms">

    <button @click="type=!type">显示/隐藏</button>

    <transition name="lt">

        <h1 v-if="type">http://www.baidu.com百度一下就知道</h1>

    </transition>

</div>

<script>

    new Vue({

        el: "#hdcms",

        data: {

            type: false

        }

    });

</script>

<!--

    animation:活泼;

    transition:过渡

    transform：改变

    translate：转化

-->

<style type="text/css">

    .lt-enter-active{

        animation: show-in 1s;

        transition: all 1s;

    }

    .lt-leave-active{

        animation: show-out 1s;

        transition: all 1s;

    }

    .lt-enter,.lt-leave-to{

        opacity: 0;

    }

    @keyframes show-in {

        0%{

            transform: translate(200px,0);

        }

        100%{

            transform: translate(0,0);

        }

    }

    @keyframes show-out {

        0%{

            transform: translate(0,0);

        }

        100%{

            transform: translate(200px,0);

        }

    }

</style>

</body>

</html>

　　

049——VUE中使用animation与transform实现vue的动画效果的更多相关文章

  1. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  2. 基于CSS3新属性Animation及transform实现类似翻书效果

    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...

  3. 025——VUE中事件的基本使用与VUE中差异

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. typescript整合到vue中的详细介绍，ts+vue一梭子

    通过vue-cli命令行安装vue项目,注意不要eslint 安装依赖 cnpm install typescript --save-dev cnpm install ts-loader --save ...

  5. 如何在 vue 中添加权限控制管理？---vue中文社区

    前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为 ...

  6. 终于不再对transition和animation,傻傻分不清楚了 --vue中使用transition和animation

    以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition ...

  7. Vue中过度动画效果应用

    一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...

  8. Vue 中的动画特效

    Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. Vue中的动画效果

    Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...

随机推荐

  1. 服务器为什么这么慢？耗尽了CPU、RAM和磁盘I/O资源

    机器运行缓慢通常是由于消耗了太多系统特定的资源.系统的主要资源包括CPU.RAM.磁盘I/O以及网络.过度使用这些资源的任何一种都会让系统陷入困境.不过,如果能登录到系统之中,可以借助大量工具确定问题 ...

  2. Redundant Paths---poj3177（双连通分量）

    题目链接:http://poj.org/problem?id=3177 题意:有n个牧场,Bessie 要从一个牧场到另一个牧场,要求至少要有2条独立的路可以走.现已有m条路,求至少要新建多少条路,使 ...

  3. HTTP 请求头中的 X-Forwarded-For（转）

    原文:https://imququ.com/post/x-forwarded-for-header-in-http.html 我一直认为,对于从事 Web 前端开发的同学来说,HTTP 协议以及其他常 ...

  4. 【我的Android进阶之旅】Android 源代码中的Java代码中//$NON-NLS-1$ 注释是什么意思？

    1.背景 最近在负责公司基础业务和移动基础设施的开发工作,正在负责Lint代码静态检查工作.因此编写了自定义的Lint规则,在编写自定义的Lint规则前,当然是需要去把Google的关于Lint检测的 ...

  5. mysql备份的4种方式

    mysql备份的4种方式 转载自:https://www.cnblogs.com/SQL888/p/5751631.html 总结: 备份方法 备份速度 恢复速度 便捷性 功能 一般用于 cp 快 快 ...

  6. Flask系列（三）蓝图、基于DButils实现数据库连接池、上下文管理

    知识点回顾 1.子类继承父类的三种方式 class Dog(Animal): #子类 派生类 def __init__(self,name,breed, life_value,aggr): # Ani ...

  7. 利用HBase的快照功能来修改表名

    hbase的快照功能常常被用来做数据的恢复的,但是由于项目的特殊需求需要改hbase表的表名.在官网上通过快照功能来修改hbase表名的用法: 下面展示用shell命令的和Java api两种方式: ...

  8. HDU5086:Revenge of Segment Tree(规律题）

    http://acm.hdu.edu.cn/showproblem.php?pid=5086 #include <iostream> #include <stdio.h> #i ...

  9. HashSet、HashMap、Hashtable、TreeMap循环、区别

    HashSet 循环 //可以为null HashSet<Object> hashSet =new HashSet<Object>(); hashSet.add(1); has ...

  10. VS2010/MFC编程入门之二十一（常用控件：编辑框Edit Control）

    鸡啄米上一节讲了静态文本框,本节要讲的编辑框(Edit Control)同样是一种很常用的控件,我们可以在编辑框中输入并编辑文本.在前面加法计算器的例子中已经演示了编辑框的基本应用.下面具体讲解编辑框 ...