记录一下今天在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. Scratch少儿编程系列：（十）系列总结及后续计划

    一.系列文章的来由 本篇为该系列文章的一个简单总结, 从初次接触Scratch开始,在写本系列文章过程中,一边读书,一边通过例子做练习. 技术实现,对于我跟人来说,没有什么难度. 我相信,对于一个初次 ...

  2. Docker&Java&Mysql&Python3&Supervisor&Elasticsearch安装

    目录 docker 安装java 安装mysql 安装Mysql8 安装python3 安装supervisor 安装ElasticSearch 打包images docker yum install ...

  3. C语言博客作业06

    一.表格 问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/988 ...

  4. Windows C++ 判断文件是否是图片格式的方法。

    一.通过后缀名去判断. bool IsImageByTail(const std::wstring &path) { std::wstring file_exten; size_t pos = ...

  5. maven坐标Dependencies和Exclusions详解

    1.概念介绍 Dependencies:是可选依赖(Optional Dependencies) Exclusions:是依赖排除(Dependency Exclusions) 2.Dependenc ...

  6. System.InsufficientMemoryException:无法分配536870912字节的托管内存缓冲区。可用内存量可能不足

    一个病人住院太久,一次性打印护理表单超过3000条时报如标题所示的错误, 个人查阅分析应该可以从如下几方面入手: 一:查看程序客户端和服务端的配置文件相关属性是否限制了缓存最大值 (应该不是这个问题, ...

  7. mysql整理-常用sql语句

    一.常用sql show variables like 'character_set_client';#查询字符集 show databases;#列出所有的服务器上的数据库alter create ...

  8. [LeetCode] 228. 汇总区间

    题目链接: https://leetcode-cn.com/problems/summary-ranges 难度:中等 通过率:48.9% 题目描述: 给定一个无重复元素的有序整数数组,返回数组区间范 ...

  9. Codeforces1256F_Equalizing Two Strings

    题意 给定两个字符串,可以任意选择s串的一段和t串的相同长度的一段进行翻转,无限次数,问能否通过翻转使得两个字符串相等. 分析 看了题解发现思路很巧妙. 无限次数的子串翻转其实就是相邻两个字符的交换. ...

  10. vs2013在用户控件中添加jquery智能提示

    一.在script文件夹下面添加_references.js文件夹 二.把jquery文件拖到该文件中 保存,重新打开相应的文件,即出现智能提示