记录一下今天在vue的transition中遇到的坑

<!DOCTYPE html>

<html>

<head>

    <title>Vue中CSS动画原理</title>

    <script type="text/javascript" src="../vue.min.js"></script>

    <!-- 定义动画样式 -->

    <style type="text/css">

        .v-enter{

            opacity: 0;

        }

        .v-enter-active{

            transition: opacity 3s;

        }

    </style>

</head>

<body>

    <div id="root">

        <!-- 动画 -->

        <transition name="myfade">

        <!-- name属性的值作为fade-enter fade-enter-active等开头的名字 -->

            <div v-if="show">hello world</div>

        </transition>

        <button @click="change">切换</button>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: "#root",

            data: {

                show: true

            },

            methods: {

                change: function () {

                    this.show = !this.show

                }

            }

        });

    </script>

</body>

</html>

被告知 transition 的 name 属性是可以自己随意设置的，于是给了 myfade，结果发现没有效果。

后来研究了下发现，这个 name 的值是用来替换 v-enter 的 v

于是修改成

　　<style type="text/css">

        .myfade-enter{

            opacity: 0;

        }

        .myfade-enter-active{

            transition: opacity 3s;

        }

    </style>

就OK了~

另注：transition 只有 name 这一个属性，且只有一个子元素，这个子元素需要 v-if 或 v-show 来控制是否显示。

vue的transition的name作用的更多相关文章

  1. vue项目的各个文件作用

    vue项目的各个文件作用: build:放置的是webpack配置文件,一般不动,修改了必须重启服务器才能生效 config:放置针对开发环境和线上环境的配置文件,一般不动 修改后需重启 node_m ...

  2. php开发面试题---vue面试题（vue.js的好处及作用）

    php开发面试题---vue面试题(vue.js的好处及作用) 一.总结 一句话总结: 双向数据绑定:在做ajax的时候,更新实在是太方便了 用数据绑定的思想,vue可以简单写单个页面,也可以写一个大 ...

  3. 在 vue 中用 transition 实现轮播效果

    概述 今天我接到一个需求:轮播效果.本来我是打算使用 Swiper 实现的,但是想起来貌似 transition 也能实现.于是就试了下,真的可以,还挺简单的,于是就记录下来,供以后开发时参考,相信对 ...

  4. vueX、vue中transition的使用、axios

    引入一篇好文章链接:看一遍就会的vuex文章;完!!! vue中transtion的使用:transition文章;完!!! axios的文章:axios;完!!!

  5. Vue中transition和animation的使用

    一:二者的对比 1.动画循环就用animation.在animation中有一个animation-iteration-count属性可以定义循环次数.transition是执行一次以后就不会执行,但 ...

  6. vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  7. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

  8. vue中 key 值的作用

    原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...

  9. vue的transition过渡效果

    需要4个类: *-enter: 进入的开始状态, *-enter-active: 进入的结束状态, *-leave: 离开的开始状态, *-leave-active: 离开的结束状态 vue-rout ...

随机推荐

  1. Robots协议一定放在网站根目录下

    一.网络爬虫的尺寸 1.以爬取网页,玩转网页为目的进行小规模,数据量小对爬取速度不敏感的可以使用request库实现功能(占90%) 2.以爬取网站或爬取系列网站为目的,比如说获取一个或多个旅游网站的 ...

  2. tableau分布式添加节点

    参考: 两节点的安装:https://zhuanlan.zhihu.com/p/44732932https://help.tableau.com/current/server-linux/zh-cn/ ...

  3. java.time包常用类API学习记录

    Java8出来已那么多年了,java.time包之前一直没有使用过,最近正好有用到,在此做个记录. 上图列出了java.time包下的类,接下来我们详细看下其中每个类的用法. Clock:获取到当前时 ...

  4. WordPress 在Ubuntu下安装插件、主题输入FTP后无法创建目录

    最近自己在搞基于lnmp+wordpress的个人博客, 一切都就绪后,想改变下自己的主题,然后去Wordpress里面内置的主题安装下载的时候,提示:无法创建目录! 一般我们在Ubuntu系统上面安 ...

  5. Luogu P4147 玉蟾宫

    题目 就是全0子矩阵. 先预处理每个点上面有多少个连续的0(包括自己). 然后我们枚举下边界(1-n). 我们开一个单调栈,记录一个上界递增的矩形集合. 如果我们扫到了一个比当前栈顶要矮的矩形,那么我 ...

  6. C++对象在继承情况下的内存布局

    1,C++ 中继承是非常重要的一个特性,本节课研究在继承的情形下,C++ 的对象模 型又有什么不同: 2,继承对象模型(最简单的情况下): 1,在 C++ 编译器的内部类可以理解为结构体: 2,子类是 ...

  7. div css 布局对seo 影响 布局原则

    一.代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高蜘蛛爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处 ...

  8. java复习(1)面向对象

    一.面向对象的概念 ----------------------------------------------------- 1.理解面向对象:(1)面向对象是相对于面向过程的语言 (2)面向对象和 ...

  9. 深入Spring Boot：那些注入不了的 Spring 占位符 ( ${} 表达式 )

    Spring里的占位符 spring里的占位符通常表现的形式是: 1 2 3 <bean id="dataSource" destroy-method="close ...

  10. Python基础——函数入门

    等待更新…………………… 后面再写