首页 前端开发 如何使用 Vue.js 在选择选项上使用转换
如何使用 Vue.js 在选择选项上使用转换
[英] How to use transitions on select option using Vue.js
本文介绍了如何使用 Vue.js 在选择选项上使用转换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有关于 Vue.js 转换的快速问题.
在我的 boostrap 模板中，我试图根据所选选项添加一个更多的选择选项下拉列表.所以，我在第一个选择选项上添加了更改事件.因此，如果我选择 'first item' 然后更改类并在行中添加下拉列表，否则将其隐藏.
<块引用>
类似这样:
selectTodo: function(e) {让 selectValue = e.target.options[e.target.selectedIndex].textif (selectValue === '学习 Vue') {this.styleObject.display = 'unset';this.col_md = 'form-group col-md-4';this.showCropStageList = true;}别的 {this.showCropStageList = false;this.styleObject.display = '无';this.col_md = 'form-group col-md-6';this.cropStageList = null;}}
我设法做到了，但我希望在前两个下拉菜单中更多 平滑过渡.
我已经设法设置了一些 fiddle ，您可以在其中看到第三张幻灯片的平滑过渡选择下拉菜单，但如果我将选择从 "Learn Vue" 更改为其他内容，第三个下拉菜单会隐藏它，但也没有任何动画.
您也可以在下面的代码段中看到它！
new Vue({el: "#app",数据: {待办事项: [{ id:1 ,text: "Learn JavaScript", done: false },{ id:2 ,text: "Learn Vue", done: false },{ id:3 ,text: "Play around in JSFiddle", done: true },{ id:4 ,text: "构建很棒的东西", done: true }],col_md: 'form-group col-md-6',样式对象:{显示:'无'},showCropStageList: 假，},方法: {切换:功能(待办事项){todo.done = !todo.done},selectTodo:功能(e){让 selectValue = e.target.options[e.target.selectedIndex].textif (selectValue === '学习 JavaScript') {this.styleObject.display = 'unset';this.col_md = 'form-group col-md-4';this.showCropStageList = true;}别的 {this.showCropStageList = false;this.styleObject.display = '无';this.col_md = 'form-group col-md-6';this.cropStageList = null;}}}})
body {背景:#20262E；填充:20px；字体系列:Helvetica；}.淡入淡出{不透明度:0；}.fade-enter-active {过渡:不透明度1s；}.淡入淡出{}.fade-leave-active {过渡:不透明度1s；不透明度:0；}#应用程序 {背景:#fff;边框半径:4px；填充:20px；过渡:全0.2s；}李{边距:8px 0；}h2{字体粗细:粗体；底边距:15px；}删除{颜色:RGBA(0, 0, 0, 0.3);}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><;/脚本><div class="容器"><!-- 这里的内容--><div id="应用程序"><div class="form-row"><transition name="fade"出现><div v-bind:class=col_md><label for="cropType" class="col-form-label-sm font-weight-bold">选择学习Javascript </label><select class="form-control" v-on:change="selectTodo" id="cropType" v-model="pickedCropType" @change="getCropsByType()"><option v-for="(todo, index) in todos" :key="index" :value="todo.id" >{{todo.text}}</选项></选择><div v-bind:class=col_md><label for="cropCulture" class="col-form-label-sm font-weight-bold">2.第二个<select class="form-control" id="cropCulture"><option v-for="(todo, index) in todos" :key="index" :value="todo.id" >{{todo.text}}</选项></选择>
<过渡enter-active-class="动画fadeInLeft"leave-active-class="动画淡出左"><div class="form-group col-md-4" v-if="showCropStageList" v-bind:class="{styleObject }"> 3.第三个 <select class="form-control" id="cropStage"><option v-for="(todo, index) in todos" :key="index" :value="todo.id" >{{todo.text}}</选项></选择>
您可以看到前两个下拉菜单的更改类，但没有任何转换.那么，是否可以为前两个下拉菜单添加一些过渡效果?
<小时>如您所见，我正在将班级从 *form-group col-md-6* 更改为 *form-group col-md-4*，我想知道从 md 过渡是否有可能-6 到 md-4 可以更流畅一些.
https://jsfiddle.net/Loque/akt0su98/
解决方案
在您的代码中，您直接将类从 col-md-4 更新为 col-md-6selectTodo 中的代码>.它会导致前两个
在第三个 div 完成动画之前占据行的
全宽 .
解决方案 ，使用this.$nextTick和setTimeout.
当添加第三个 div 时，延迟执行在前两个
完成它们的动画之前显示第三个 div.
删除第三个div时，在第三个
之前，将
col-md-6延迟应用到前两个
code> 完成它的动画.
下面是一个示例 :(PS :我在这里使用了transition-group，因为它更适合可重用的转换 )
警告 :请在整个页面下测试下面的演示，否则引导程序会将其视为超小屏幕(将每个
放在每一行中)，但是我觉得小屏效果还是不错的.
new Vue({el: "#app",数据: {待办事项: [{ id:1 ,text: "Learn JavaScript", done: false },{ id:2 ,text: "Learn Vue", done: false },{ id:3 ,text: "Play around in JSFiddle", done: true },{ id:4 ,text: "构建很棒的东西", done: true }],col_md: 'form-group col-md-6',样式对象:{显示:'无'},showCropStageList: 假，pickCropType: ''},方法: {getCropsByType: 函数 () {},切换:功能(待办事项){todo.done = !todo.done},selectTodo:功能(e){让 selectValue = e.target.options[e.target.selectedIndex].textif (selectValue === '学习 Vue') {this.col_md = 'form-group col-md-4';this.$nextTick(() => {//在前两个div完成动画之前延迟显示第三个divsetTimeout(()=>{this.styleObject.display = 'unset';this.showCropStageList = true;}, 500)})}别的 {this.showCropStageList = false;this.styleObject.display = '无';this.$nextTick(() => {//在第三个 div 完成动画之前延迟将 `md-6` 应用到前两个 divsetTimeout(()=>{this.col_md = 'form-group col-md-6';}, 1000)})this.cropStageList = null;}}}})
.sample {背景:#fff;边框半径:4px；填充:20px；过渡:全0.2s；}.fade-item {过渡:全0.5s；显示:内联块；}.淡入淡出{不透明度:0；变换:translateX(-130px);}.fade-enter-active {过渡:全1.5s；}.fade-leave-to {变换:translateX(130px);不透明度:0；弹性:0 0 20%；}.fade-leave-active {过渡:全1；}#应用程序 {背景:#20262E；填充:20px；字体系列:Helvetica；}李{边距:8px 0；}h2{字体粗细:粗体；底边距:15px；}删除{颜色:RGBA(0, 0, 0, 0.3);}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="样式表"/><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script><!-- 这里的内容--><div id="应用程序"><div class="容器"><div class="sample"><transition-group name="fade" tag="div" class="form-row"><div v-bind:class="col_md" :key="1" class="fade-item"><label for="cropType" class="col-form-label-sm font-weight-bold">选择学习Javascript </label><select class="form-control" v-on:change="selectTodo" id="cropType" v-model="pickedCropType" @change="getCropsByType()"><option v-for="(todo, index) in todos" :key="index" :value="todo.id" >{{todo.text}}</选项></选择><div v-bind:class="col_md" :key="2" class="fade-item"><label for="cropCulture" class="col-form-label-sm font-weight-bold">2.第二个<select class="form-control" id="cropCulture"><option v-for="(todo, index) in todos" :key="index" :value="todo.id" >{{todo.text}}</选项></选择>
<div class="form-group col-md-4fade-item" v-if="showCropStageList" v-bind:class="{styleObject }" :key="3"> 3.第三个 <select class="form-control" id="cropStage"><option v-for="(todo, index) in todos" :key="index" :value="todo.id" >{{todo.text}}</选项></选择>
</transition-group>
I have quick question regarding transitions with Vue.js.
In my boostrap template I'm trying to add one more select option dropdown based on selected option. So, I added change event on first select option. So, if I select 'first item' then change classes and add dropdown in row, or else hides it.
Something like this:
selectTodo: function(e) {
let selectValue = e.target.options[e.target.selectedIndex].text
if (selectValue === 'Learn Vue') {
this.styleObject.display = 'unset';
this.col_md = 'form-group col-md-4';
this.showCropStageList = true;
}
else {
this.showCropStageList = false;
this.styleObject.display = 'none';
this.col_md = 'form-group col-md-6';
this.cropStageList = null;
}
}
I managed to do that but I want more smoother transitions on the first two dropdowns.
I've managed to set up some fiddle where you can see smooth slide transition for third select dropdown but if if I change select from "Learn Vue" to something else, the third dropdown hides it but without any animation as well.
You can see it in the snippet below, too!
new Vue({
el: "#app",
data: {
todos: [
{ id:1 ,text: "Learn JavaScript", done: false },
{ id:2 ,text: "Learn Vue", done: false },
{ id:3 ,text: "Play around in JSFiddle", done: true },
{ id:4 ,text: "Build something awesome", done: true }
],
col_md: 'form-group col-md-6',
styleObject: {
display: 'none'
},
showCropStageList: false,
},
methods: {
toggle: function(todo){
todo.done = !todo.done
},
selectTodo: function(e) {
let selectValue = e.target.options[e.target.selectedIndex].text
if (selectValue === 'Learn JavaScript') {
this.styleObject.display = 'unset';
this.col_md = 'form-group col-md-4';
this.showCropStageList = true;
}
else {
this.showCropStageList = false;
this.styleObject.display = 'none';
this.col_md = 'form-group col-md-6';
this.cropStageList = null;
}
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 1s;
}
.fade-leave {}
.fade-leave-active {
transition: opacity 1s;
opacity: 0;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div class="container">
<!-- Content here -->
<div id="app">
<div class="form-row">
<transition name="fade" appear>
<div v-bind:class=col_md>
<label for="cropType" class="col-form-label-sm font-weight-bold">Select Learn Javascript </label>
<select class="form-control" v-on:change="selectTodo" id="cropType" v-model="pickedCropType" @change="getCropsByType()">
<option v-for="(todo, index) in todos" :key="index" :value="todo.id" >
{{todo.text}}
</option>
</select>
</div>
</transition>
<div v-bind:class=col_md>
<label for="cropCulture" class="col-form-label-sm font-weight-bold">2. Second</label>
<select class="form-control" id="cropCulture">
<option v-for="(todo, index) in todos" :key="index" :value="todo.id" >
{{todo.text}}
</option>
</select>
</div>
<transition
enter-active-class="animated fadeInLeft"
leave-active-class="animated fadeOutLeft"
>
<div class="form-group col-md-4" v-if="showCropStageList" v-bind:class="{styleObject }">
<label for="cropStage" class="col-form-label-sm font-weight-bold">3. Third</label>
<select class="form-control" id="cropStage">
<option v-for="(todo, index) in todos" :key="index" :value="todo.id" >
{{todo.text}}
</option>
</select>
</div>
</transition>
</div>
</div>
</div>
You can see change class for first two dropdowns but without any transitions. So, is it possible to add some transitions for first two dropdowns?
EDIT :
As you can see I'm changing class from *form-group col-md-6* to *form-group col-md-4* and I' wondering if is it possible that that tranisition from md-6 to md-4 can be a bit smoother.
https://jsfiddle.net/Loque/akt0su98/
解决方案
In your codes, you directly update the class from col-md-4 to col-md-6 in selectTodo. It will cause first two <div> take full width of the row before 3rd div finishes its animation.
The solution , uses this.$nextTick and setTimeout.
when add the third div, delay execute show the third div before first two <div> finish their animations.
when remove the third div, delay apply col-md-6 to the first two <div> before the third <div> finishes its animations.
Below is one sample : (PS : I used transition-group here, because it will be better for Reusable Transitions )
Warning : Please test below demo under full page, otherwise bootstrap will treat it as extre-small screen (place each <div> in each row), though I think the effects in small screen is still not bad.
new Vue({
el: "#app",
data: {
todos: [
{ id:1 ,text: "Learn JavaScript", done: false },
{ id:2 ,text: "Learn Vue", done: false },
{ id:3 ,text: "Play around in JSFiddle", done: true },
{ id:4 ,text: "Build something awesome", done: true }
],
col_md: 'form-group col-md-6',
styleObject: {
display: 'none'
},
showCropStageList: false,
pickedCropType: ''
},
methods: {
getCropsByType: function () {},
toggle: function(todo){
todo.done = !todo.done
},
selectTodo: function(e) {
let selectValue = e.target.options[e.target.selectedIndex].text
if (selectValue === 'Learn Vue') {
this.col_md = 'form-group col-md-4';
this.$nextTick(() => { //delay display the third div before first two div finish animation
setTimeout(()=>{
this.styleObject.display = 'unset';
this.showCropStageList = true;
}, 500)
})
}
else {
this.showCropStageList = false;
this.styleObject.display = 'none';
this.$nextTick(() => { //delay apply `md-6` to first two div before 3rd div finish animation
setTimeout(()=>{
this.col_md = 'form-group col-md-6';
}, 1000)
})
this.cropStageList = null;
}
}
}
})
.sample {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.fade-item {
transition: all 0.5s;
display:inline-block;
}
.fade-enter {
opacity: 0;
transform: translateX(-130px);
}
.fade-enter-active {
transition: all 1.5s;
}
.fade-leave-to {
transform: translateX(130px);
opacity: 0;
flex: 0 0 20%;
}
.fade-leave-active {
transition: all 1s;
}
#app {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<!-- Content here -->
<div id="app">
<div class="container">
<div class="sample">
<transition-group name="fade" tag="div" class="form-row">
<div v-bind:class="col_md" :key="1" class="fade-item">
<label for="cropType" class="col-form-label-sm font-weight-bold">Select Learn Javascript </label>
<select class="form-control" v-on:change="selectTodo" id="cropType" v-model="pickedCropType" @change="getCropsByType()">
<option v-for="(todo, index) in todos" :key="index" :value="todo.id" >
{{todo.text}}
</option>
</select>
</div>
<div v-bind:class="col_md" :key="2" class="fade-item">
<label for="cropCulture" class="col-form-label-sm font-weight-bold">2. Second</label>
<select class="form-control" id="cropCulture">
<option v-for="(todo, index) in todos" :key="index" :value="todo.id" >
{{todo.text}}
</option>
</select>
</div>
<div class="form-group col-md-4 fade-item" v-if="showCropStageList" v-bind:class="{styleObject }" :key="3">
<label for="cropStage" class="col-form-label-sm font-weight-bold">3. Third</label>
<select class="form-control" id="cropStage">
<option v-for="(todo, index) in todos" :key="index" :value="todo.id" >
{{todo.text}}
</option>
</select>
</div>
</transition-group>
</div>
</div>
</div>
这篇关于如何使用 Vue.js 在选择选项上使用转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
