1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>使用animation与transform实现vue的动画效果</title>
  7.     <script src="vue.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div id="hdcms">
  12.     <button @click="type=!type">显示/隐藏</button>
  13.     <transition name="lt">
  14.         <h1 v-if="type">http://www.baidu.com百度一下就知道</h1>
  15.     </transition>
  16. </div>
  17.  
  18. <script>
  19.     new Vue({
  20.         el: "#hdcms",
  21.         data: {
  22.             type: false
  23.         }
  24.     });
  25. </script>
  26. <!--
  27.     animation:活泼;
  28.     transition:过渡
  29.     transform：改变
  30.     translate：转化
  31. -->
  32. <style type="text/css">
  33.     .lt-enter-active{
  34.         animation: show-in 1s;
  35.         transition: all 1s;
  36.     }
  37.     .lt-leave-active{
  38.         animation: show-out 1s;
  39.         transition: all 1s;
  40.     }
  41.  
  42.     .lt-enter,.lt-leave-to{
  43.         opacity: 0;
  44.     }
  45.     @keyframes show-in {
  46.         0%{
  47.             transform: translate(200px,0);
  48.         }
  49.         100%{
  50.             transform: translate(0,0);
  51.         }
  52.     }
  53.     @keyframes show-out {
  54.         0%{
  55.             transform: translate(0,0);
  56.         }
  57.         100%{
  58.             transform: translate(200px,0);
  59.         }
  60.     }
  61. </style>
  62. </body>
  63.  
  64. </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. 当Web访问性能出现问题，如何深探？

    对运维或开发工程师来说,遇到访问性能问题时,最先需要定位的是问题出现在哪个环节,是网络的问题,服务端的问题,还是客户端的问题? 往往技术人员喜欢把精力放在保障后端服务的可用性方面,而对前端界面是否能正 ...

  2. Struts2的ActionContext

    web资源:HttpServletRequest,HttpSession,ServletContext等原生Servlet API Action中如何访问web资源: 1.和Servlet API解耦 ...

  3. java-mybaits-00602-查询缓存-mybatis整合ehcache

    ehcache是一个分布式缓存框架.EhCache 是一个纯Java的进程内缓存框架,是一种广泛使用的开源Java分布式缓存,具有快速.精干等特点,是Hibernate中默认的CacheProvide ...

  4. 003-spring cache-JCache (JSR-107) annotations

    参看地址:https://docs.spring.io/spring/docs/current/spring-framework-reference/integration.html#cache-js ...

  5. linux/Mac使用du查看目录占用的磁盘大小

    [1]du命令用来查看目录或文件所占用磁盘空间的大小.常用选项组合为: du -sh [2]若要查看一个目录下每个文件和文件夹的磁盘占用空间,使用如下命令: du -ah --max-depth=1 ...

  6. Redis Python开发指南

    redis基本命令 String set     setex     psetex   mset   mget  getset getrange    setrange  setbit   getbi ...

  7. com.sun.image.codec.jpeg在Eclipse中报错的解决办法

    在Eclipse中处理图片,需要引入两个包:import com.sun.image.codec.jpeg.JPEGCodec;import com.sun.image.codec.jpeg.JPEG ...

  8. oauth2(转载http://www.rollosay.com/it/%E4%BD%BF%E7%94%A8OAuth-Server-PHP%E5%AE%9E%E7%8E%B0OAuth2%E6%9C%8D%E5%8A%A1)

    http://www.rollosay.com/it/%E4%BD%BF%E7%94%A8OAuth-Server-PHP%E5%AE%9E%E7%8E%B0OAuth2%E6%9C%8D%E5%8A ...

  9. http之请求报文request

    https://blog.csdn.net/blueheart20/article/details/45174399 户端发送一个HTTP请求到服务器的请求消息包括以下格式: 请求行(request ...

  10. ng-深度学习-课程笔记-15: 循环序列模型(Week1)

    1 数学符号(Notation) $ x^{<1>}, x^{<2>}, ..., x^{<t>}, ..., x^{<q>} $ 表示一段输入序列x, ...