vue中transition组件的坑

最新推荐文章于 2024-05-23 19:22:50 发布
最新推荐文章于 2024-05-23 19:22:50 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： 前端 文章标签： vue
原文链接：https://www.jianshu.com/p/6d7728482c9f
版权

在组件外面，或者一个层外面包括即可

然后css配置如下：

css设置要对应transition组件的属性name，应该很容易读懂。

等等，还没完！

如果transition组件外面存在v-if条件判断渲染，则无效。

另transition组件必须要包在一个v-if或v-show的外面，如以下则无效：

如果你有需求一定要在这样，那么也有解决方法，就是再加一个v-show/v-if则即可


详情文档见：https://cn.vuejs.org/v2/api/#transition

喯啵儿灞
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-transition-component:为vue.js组件提供GreenSock过渡功能
05-09
为vue.js组件提供GreenSock过渡功能。 安装 yarn add vue-transition-component npm i -S vue-transition-component 文献资料 例子 我提供了一个示例设置，您可以在其中看到过渡控制器的运行情况，按照以下步骤运行项目： git clone https://github.com/larsvanbraam/vue-transition-component.git cd vue-transition-component/example yarn yarn dev 打开浏览器localhost:8080 或单击以在线预览 建造 为了构建vue-transition-component，请确保已安装和Node.js。 克隆仓库的副本： git clone https://github.com/lar
Vue的内置组件--component/transition/transition-group/keep-alive/slot
qq_41261490的博客
07-29 442
Vue的内置组件 component 作用：渲染一个“原组件”为动态组件。依is的值，来决定那个组件被渲染 props: is: -string|ComponentDefinition|ComponentConstructor inline-template: -boolean 用法： 动态组件由 vm 实例的属性值 componentId 控制 <component :is="comp...
Vue 中使用 <transition> 标签创建过渡动画的详细教程
最新发布
前端开发博客
05-23 430
大家好，我是宝哥。最近我打算更新一系列的新手Vue入门教程，预计更新20篇以上。欢迎关注我。第一篇是关于Vue中如何创建动画过渡效果的教程，你将学会使用Vue的<transition>标签来创建动画，并且知道如何将动画融入项目。首先，我们来了解Vue的过渡效果，它用来处理有条件渲染的内容。然后，我们会自己创建CSS动画样式。最后，我们看看如何结合第三方CSS库来使用Vue动画。Vue过...
vue3的路由中如何使用transition；Transition + Component实现路由跳转浅入浅出效果
weixin_43488503的博客
11-02 850
vue3的路由中如何使用transition；Transition + Component实现路由跳转浅入浅出效果
transition过渡效果失效问题
qq_36154659的博客
09-25 454
transition过渡效果失效问题 transition不能和display:none合用，合用的时候可能出现打开控制台过渡效果偶尔生效，控制台关闭后过渡效果不生效问题，想要实现元素出现后进行过渡效果可以使用visibility属性将元素设置到不可见并将z-index放到其他元素下面，当需要出现时再将元素设置为可见并将z-index设置到正常的大小 ...
（Vue）使用＜transition＞标签对元素使用过渡失效
u014572617的博客
09-26 1682
<transition name="move"> <div class="btn" v-if="regOrlog" key="regist"> <input type="button" value="注册" class="reg-btn" @click="userRegist"> </div> <div class="btn" v-else> <input type="button" .
Vue中的transition封装组件的实现方法
10-16
主要介绍了Vue中的transition封装组件的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue transition 在子组件中失效的解决
12-30
子组件： <div class=mask click.self=onMask></div> <transition name=slide-fade> 我的 </transition> [removed] export default { name: mine, props: [showMine], data() { return {};
Vue 过渡（动画）transition组件案例详解
08-31
要添加过渡效果，我们需要在`transition`组件中声明一个名称，例如`name="fade"`，这样Vue就能生成对应的CSS类名来控制过渡。在CSS中，我们需要定义`.fade-enter-active`和`.fade-leave-active`类，它们定义了过渡的...
vue的transition进场过度不生效的可能原因
Chris_Ning的博客
02-02 1730
参考：https://v3.vuejs.org/guide/transitions-enterleave.html。现象：用vue自带的transition写了一个过度，奇怪的是进场不生效，出场生效。我是vue3但使用了vue2的写法，所以不生效。代码：一个简单的显隐控制。
vue transition 失效问题
zhongmei121的专栏
06-17 6954
项目中使用transition的时候失效，查找了很久终于找出问题所在，原因是home组件根据路由路径判断显示内容还是<router-view>，导致在layout组件里使用transition失效（home是layout的子组件），在home里面的<router-view>处使用transition也失效。 错误代码： home组件 修改为 去掉v-else那个d...
关于vue状态过渡transition不起作用的原因解决
01-19
总所周知，vue中的transition标签可以方便得进行动画过渡，使用的方法也很简单。 <transition name=你要的名字> 过渡的元素... </transition> 这里需要主要一点的是：过渡的元素只能是以下之一： 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 常用的过渡名称有fade等 你可以这样用 <transition name=fade> 过渡的元素... </transition> 实现的效果就是淡入淡出。 如果需要自定义过渡动画的，记得在css中修改以下的类名： 你要的名字-enter   
Vue3.0踩坑 ＜Transition＞标签配合v-if和v-else时代码失效和过渡失效的原因。
qq_32149823的博客
03-25 3635
问题描述 起因是我先用v-if和v-else完成图片加载前的骨架功能（在图片加载完成前会先显示骨架组件),代码截取如下： <ul v-if="goods.length" class="goods-list"> ..... </ul> <!-- 骨架屏组件 --> <HomeSkeleton v-else bg="#f0f9f4" /> 以上代码的功能正常，直到我给外层添加了Vue的<Transition>过渡标签，本意是想让二者切换
vue入门全局配置
weixin_30650039的博客
02-25 591
全局配置 Vue.config是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列属性： silent 类型：boolean 默认值：false 用法： Vue.config.silent = true 取消 Vue 所有的日志与警告。 optionMergeStrategies 类型：{ [key: strin...
vscode提示Elements in iteration expect to have ‘v-bind:key‘ directives.解决办法
shaoxiukun的博客
07-30 535
Vue 2.2.0+的版本里，当在组件中使用v-for时，key是必须的。位置：vscode->首选项->设置->搜索（vetur）->取消对钩。1> 更改vetur配置。
【Vue】transition让你的v-if和v-show有个美美的过渡与动画
热门推荐
归子莫的博客
01-05 1万+
产品说：要你在这个这个显示的时候，那个不要显示，但是怎么突然就没了，这样用户会不会觉得这是个Bug？ Bug：？？？ 其实这个是我们在vue中最平常使用的v-if和v-show指令。 生硬的业务场景切换，让产品感觉还可以优化的错觉 那么就再来优化一下！加个动画？
Vue 2.6 源码剖析-模板编译
皮蛋很白的博客
08-12 655
模板编译介绍 模板编译的主要目的是将模板（template）转换为渲染函数（render）。 模板编译的作用 Vue 2.x 使用 VNode 描述视图以及各种交互，用户自己编写 VNode （直接写render，调用h函数）比较复杂 用户只需要编写类似 HTML 的代码 - Vue.js 模板，通过编译器将模板转换为范围 VNode 的render函数 .vue文件（SFC）会被webpack在构建的过程中转换成render函数 内部通过 vue-loader 实现 体验模板编译的结果
vue常见问题
2301_76917110的博客
03-09 819
vue常见问题
vue3警告：Component inside ＜Transition＞ renders non-element root node that cannot be animated
weixin_40837048的博客
08-02 1224
vue3警告：Component inside ＜Transition＞ renders non-element root node that cannot be animated 的解决方法
vue 中的 transition 组件
04-03
Vue 中的 transition 组件可以用于在元素的插入、更新或删除时应用动画效果。transition 组件包括以下几个属性： - name：指定过渡效果的名称，可以通过 CSS 中的 `.name-enter`、`.name-leave`、`.name-enter-active`、`.name-leave-active`、`.name-enter-to`、`.name-leave-to` 类名来设置不同阶段的动画样式。 - mode：指定过渡模式，可选值有 in-out（新元素先执行过渡，完成后旧元素执行过渡）、out-in（旧元素先执行过渡，完成后新元素执行过渡）和默认值（同时执行过渡）。 - appear：是否在初始渲染时应用过渡效果。 - css：是否使用 CSS 过渡效果。 - type：指定过渡类型，可选值有 transition 和 animation，默认为 transition。 在使用 transition 组件时，需要在要进行过渡的元素外层包裹一个 `<transition>` 标签，并在需要过渡的阶段添加 `v-enter`、`v-enter-active`、`v-enter-to`、`v-leave`、`v-leave-active`、`v-leave-to` 等 Vue 特定的类名。例如： ```html <transition name="fade"> <p v-if="show">Hello, Vue!</p> </transition> ``` 在这个例子中，当 `show` 的值发生变化时，`<p>` 元素会根据 `fade` 过渡效果进行渐隐渐现的动画。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值