<!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. Python开发【模块】：邮件

    邮件 1.简单发送 settings.py配置: import os import sys,string from bin.start import BASE_DIR # 日志存放地址 RUN_LOG ...

  2. linux彻底删除nginx

    卸载 删除 nginx 1.删除nginx,–purge包括配置文件 sudo apt-get --purge remove nginx 1 2.自动移除全部不使用的软件包 sudo apt-get ...

  3. docker 离线环境安装oracle

    因测试需要,需在内网的测试环境搭建一套docker Oracle 11g环境进行测试,测试环境为redhat 6.6 安装docker 1.7,本机windows 7 环境,安装docker 17.1 ...

  4. git-【四】撤销修改和删除文件操作

    一:撤销修改: 比如我现在在readme.txt文件里面增加一行 内容为555555555555,我们先通过命令查看如下: 在未提交之前,发现添加5555555555555内容有误,所以得马上恢复以前 ...

  5. malloc calloc realloc 区别

    (1)C语言跟内存分配方式 <1>从静态存储区域分配.       内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量.static变量.<2> ...

  6. 32Sql数据库的插入

    上一节讲了数据库的连接,本例直接将数据库的插入操作,重点还是QSqlQuery类 QSqlQuery query; //新建二维表 query.exec("CREATE TABLE stud ...

  7. wkhtmtopdf--高分辨率HTML转PDF（三）

    代码篇 浏览了很多实例,总找不到既能把HTML保存为PDF,同时实现流抛出的,所以自己琢磨了许久,终于实现了这样两个需求的结合体,下面来贡献一下吧~~ 下面我们来选择一个网页打印下,保存为PDF,而且 ...

  8. Android 创建SQLite数据库（一）

    Android内置了轻量级的数据库SQLite,这里将自己理解作个记录,方便自己复习. 一.首先,创建SQLite数据库比较常见的方式是通过Android提供的SQLiteOpenHelper来实现, ...

  9. docker 容器目录挂载 | 进出容器

    docker run --name wnginx -d -p 9001:80 -v /home/www:/usr/share/nginx/html nginx --name   别名 -d      ...

  10. SQL学习笔记之SQL查询练习题1

    (网络搜集) 0x00 表名和字段 –1.学生表 Student(s_id,s_name,s_birth,s_sex) –学生编号,学生姓名, 出生年月,学生性别 –2.课程表 Course(c_id ...