<!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. Python3、Unicode、UTF-8、编码

    text = u'你好,今天天气不错' text print(text) text = '\u4f60\u597d\uff0c\u4eca\u5929\u5929\u6c14\u4e0d\u9519' ...

  2. python采用pika库使用rabbitmq总结，多篇笔记和示例（转）

    add by zhj:作者的几篇文章参考了Rabbitmq的Tutorials中的几篇文章. 原文:http://www.01happy.com/python-pika-rabbitmq-summar ...

  3. conda 管理 python 版本

    conda常用命令 查看当前系统下的环境 conda info -e 创建新的环境 # 指定python版本为2.7 conda create -n env_name python=2.7 # 同时安 ...

  4. Ubuntu操作异常汇总

    1.使用Ubuntu的apt-get安装软件时出现以下错误: Reading package lists... Done Building dependency tree... Done Packag ...

  5. MFC截图和界面刷新相关问题

    问题描写叙述:         就是首先用CDC来截图,保存图片的路径通过dlg窗体来手动设置并传入.但是截下来的图片就会连带那个对话框也截图下来.         就是这样.我想截后面那个图.前面这 ...

  6. centos linux 系统日常管理4 scp,rsync,md5sum,sha1sum,strace ,find Rsync 常见错误及解决方法 第十七节课

    centos linux 系统日常管理4  scp,rsync,md5sum,sha1sum,strace ,find Rsync 常见错误及解决方法  第十七节课 rsync可以增量同步,scp不行 ...

  7. http之请求方法

    根据HTTP标准,HTTP请求可以使用多种请求方法.HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法.HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELETE ...

  8. 026-B树(一)

    1.内节点:非根非叶子节点,即非根的分支节点. 2.名称:B-树=B树=平衡多路查找树. 3.定义:m阶B树. (0).根节点孩子数rootChildNum范围:若没有孩子节点则孩子数为0,若有孩子则 ...

  9. 使用RequireJS并实现一个自己的模块加载器 (二)

    2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...

  10. java 加密之消息摘要算法

    简介 消息摘要算法的主要特征是加密过程不需要密钥,并且经过加密的数据无法被解密,即单向加密,只有输入相同的明文数据经过相同的消息摘要算法才能得到相同的密文. 消息摘要算法不存在密钥的管理与分发问题,适 ...