vue.js - 如何在“内部”另一个转换中使用 Vue JS 转换?
问题描述
假设我有一个正常的过渡,效果很好(遵循 vue 文档)。但我想在那个里面有另一个过渡。
例如,一个元素滑入,但其中的文本同时淡入?
我无法让内部孩子过渡到动画。不会被解雇吧?我试过“出现”也认为节点是新的。
几乎没有这方面的信息。
<div id="demo">
<transition name="slide">
<div v-if="show">
<transition name="slide-fade">
<p>hello</p>
</transition>
</div>
</transition>
</div>
过渡效果
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.slide-fade-enter-active {
transition: all 0.3s ease;
}
.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
解决方案
您似乎没有为slide
组件添加过渡 CSS。以下应该有效:
const vm = new Vue({
el: '#demo',
data() {
return {
show: true
}
}
})
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: opacity 0.5s;
}
.slide-fade-enter,
.slide-fade-leave-to {
opacity: 0;
}
.slide-enter-active {
transition: all 0.3s ease;
}
.slide-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-enter,
.slide-leave-to {
transform: translateX(10px);
opacity: 0;
}
/* Some styling to make them noticeable */
.parent {
background-color: lightgray;
padding: 2px;
}
.child {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<transition name="slide">
<div v-if="show" class="parent">
<transition name="slide-fade">
<p class="child">hello</p>
</transition>
</div>
</transition>
<button @click="show = !show">Toggle</button>
</div>
推荐阅读
- node.js - 获取从 azure 主题获取消息的订阅客户端中的总消息计数
- python-3.x - Python对具有不同属性的标签进行排序
- c# - 如何检查外部进程打开的excel文件
- python-3.x - “系列”对象python中的日期季度
- python - Keras InvalidArgumentError:不兼容的形状:[1,8,32] 与 [1,10,32]
- petapoco - 在 PetaPoco 中,如何定义具有 2 个主键的表?
- xamarin - 如何以编程方式在 Xamarin android 中设置重力
- c++ - 从容器中的 xml 文件中提取非同质顺序数据
- function - 在 clojure 函数中使用过滤器
- angular - 在 Angular 中使用 Map 运算符转换对象