我有一个想要动画的登录屏幕。页面上有大约3组表单元素。我的目标是让表单元素一次显示为一个div键组，淡入1秒。我只看到第一组。如何让div组相互显示？
<form class="form-signin" @submit.prevent="login">
<transition name="fade">
<div key="1">
<img class="mb-4" src="../assets/logo1.png" height="189px">
<h1 class="h3 mb-3 font-weight-normal">WELCOME</h1>
<div class="alert alert-danger" v-if="error">{{ error }}</div>
</div>
<div key="2">
<label for="inputName" class="sr-only">Name</label>
<input id="inputName" class="form-control" placeholder="Username" required="" autofocus="" type="text" v-model="username">
<label for="inputPassword" class="sr-only">Password</label>
<input id="inputPassword" class="form-control" placeholder="Password" required="" type="password" v-model="password">
</div>
<div key="3">
<button class="btn btn-lg btn-primary btn-block mt-5" type="submit">Sign in</button>
<p>Don't have an account? <router-link to="/signup" class="-link">Sign Up</router-link></p>
<p class="mt-5 mb-3 text-muted">© 2017-{{ getYear() }} </p>
</div>
</transition>
</form>
</form>
和我的css for the fade
.fade {
backface-visibility: hidden;
z-index: 1;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
答案 0 :(得分：1)
<transition>只能为一个元素设置动画。但是，您可以使用多个<transition>元素。在您的情况下，您可以使用3个<transition>元素来达到最终结果。
由于您在页面加载时寻找动画，因此您可以使用appear元素提供的<transition>属性。加载页面后，appear将触发动画。
如果您没有appear属性，则需要使用v-if来启动动画
如果你有appear属性，那么页面加载后默认情况下vuejs会触发*-enter-active下的动画。您还可以覆盖默认行为。检查我在答案结尾处提供的参考网址。
示例代码位于
之下<template>
<div>
<transition name="fade1" appear>
<div class="fadecontent">
hello world1
</div>
</transition>
<transition name="fade2" appear>
<div class="fadecontent">
hello world2
</div>
</transition>
<transition name="fade3" appear>
<div class="fadecontent">
hello world3
</div>
</transition>
</div>
</template>
<style>
.fadecontent{
border: 2px solid black;
background-color: aqua;
padding:20px;
opacity: 1;
}
.fade1-enter,.fade2-enter,.fade3-enter{
transform: translateX(20px);
opacity: 0;
}
.fade1-enter-active{
transition: all 1s ease;
}
.fade2-enter-active{
transition: all 1s ease 1s;
}
.fade3-enter-active{
transition: all 1s ease 2s;
}
.fade1-leave-active,.fade2-leave-active,.fade3-leave-active{
opacity: 0;
transform: translateX(20px);
}
.fade1-leave-active{
transition: all 1s ease;
}
.fade2-leave-active{
transition: all 1s ease 1s;
}
.fade3-leave-active{
transition: all 1s ease 2s;
}
</style>
这不是获得此结果的唯一方法。您还可以使用普通html css js为同一场景制作动画。
<强>参考
https://vuejs.org/v2/guide/transitions.html
https://vuejs.org/v2/guide/transitions.html#Transitions-on-Initial-Render
答案 1 :(得分：0)
这就是我在我的应用中所做的。
new Vue({
el: '#app',
data() {
return {
interval: null
}
},
mounted() {
this.showBlocs()
},
methods: {
showBlocs() {
let els = document.querySelectorAll('.bloc')
console.log(els[1])
let i = 0
this.interval = setInterval(() => {
els[i].classList.add('slide-bottom-fade-in')
i++
if (i === els.length) {
clearInterval(this.interval)
}
}, 200)
}
},
beforeDestroy() {
clearInterval(this.interval)
}
}).bloc {
background: teal;
opacity: 0;
height: 100px;
width: 100px;
display: inline-block;
}
.slide-bottom-fade-in {
animation: slide-bottom-fade-in ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: slide-bottom-fade-in ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: slide-bottom-fade-in ease 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: slide-bottom-fade-in ease 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: slide-bottom-fade-in ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
opacity: 0;
opacity: 1\9;
}
@keyframes slide-bottom-fade-in {
0% {
opacity: 0;
transform: translate(0px, -40px);
}
100% {
opacity: 1;
transform: translate(0px, 0px);
}
}
@-moz-keyframes slide-bottom-fade-in {
0% {
opacity: 0;
-moz-transform: translate(0px, -40px);
}
100% {
opacity: 1;
-moz-transform: translate(0px, 0px);
}
}
@-webkit-keyframes slide-bottom-fade-in {
0% {
opacity: 0;
-webkit-transform: translate(0px, -40px);
}
100% {
opacity: 1;
-webkit-transform: translate(0px, 0px);
}
}
@-o-keyframes slide-bottom-fade-in {
0% {
opacity: 0;
-o-transform: translate(0px, -40px);
}
100% {
opacity: 1;
-o-transform: translate(0px, 0px);
}
}
@-ms-keyframes slide-bottom-fade-in {
0% {
opacity: 0;
-ms-transform: translate(0px, -40px);
}
100% {
opacity: 1;
-ms-transform: translate(0px, 0px);
}
}
.slide-left-fade-in {
animation: slide-left-fade-in ease 1s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: slide-left-fade-in ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: slide-left-fade-in ease 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: slide-left-fade-in ease 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: slide-left-fade-in ease 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
opacity: 0;
opacity: 1\9;
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<div class="bloc">
</div>
<div class="bloc">
</div>
<div class="bloc">
</div>
</div>