Javascript 如何在vue js上同时添加两个转换?
我是Vue js框架的新手。我试着在一个元素中使用2个转换,但是第二个转换不太好。 我的意思是第一个可以使用动画属性,但是第二个可以使用,但是动画不能使用它 这是我的密码:Javascript 如何在vue js上同时添加两个转换?,javascript,vue.js,Javascript,Vue.js,我是Vue js框架的新手。我试着在一个元素中使用2个转换,但是第二个转换不太好。 我的意思是第一个可以使用动画属性,但是第二个可以使用,但是动画不能使用它 这是我的密码: <div id="app-17" class="col-sm-4"> <h1>Lista con VueJS - AJAX</h1> <button class="btn btn-sm btn-primary mb-4" v-on:click="show = !sho
<div id="app-17" class="col-sm-4">
<h1>Lista con VueJS - AJAX</h1>
<button class="btn btn-sm btn-primary mb-4" v-on:click="show = !show">Mostar/Ocultar Lista</button>
<button class="btn btn-sm btn-primary mb-4" v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-if="show" v-for="item in list" v-bind:key="item.name">
{{item.name}}
</li>
</transition-group>
</div>
Lista con VueJS-AJAX
莫斯塔尔/文化博物馆
洗牌
{{item.name}
下面是JavaScript:
<script type="text/javascript">
var urlUsers = 'https://jsonplaceholder.typicode.com/users'
app17 = new Vue({
el: '#app-17',
created: function(){
this.getUsers();
},
data: {
list: [],
show: false
},
methods: {
getUsers: function () {
this.$http.get(urlUsers).then(function (response) {
this.list = response.data;
});
},
shuffle: function () {
this.list = _.shuffle(this.list)
}
}
})
</script>
var-urlUsers=https://jsonplaceholder.typicode.com/users'
app17=新Vue({
el:“#app-17”,
已创建:函数(){
这是getUsers();
},
数据:{
名单:[],
节目:假
},
方法:{
getUsers:函数(){
这是.http.get(urlUsers).then(函数(响应){
this.list=response.data;
});
},
洗牌:函数(){
this.list=\ shuffle(this.list)
}
}
})
CSS样式:
<style>
/*ANIMATION APP-8*/
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
.flip-list-move {
transition: transform 1s;
}
</style>
/*动画APP-8*/
.淡入激活状态,
.淡入淡出激活状态{
转变:不透明度。5s;
}
.淡入,
.淡出
/*.在版本2.1.8下,淡入淡出保持激活状态*/
{
不透明度:0;
}
.翻转列表移动{
转变:转变1s;
}
我也在使用这些链接:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
下面是一个活生生的例子:
我不能很好地理解你的问题,但我能理解在洗牌后transidion不能正常工作?@Sphinx。OP正在正确使用
。你的建议是错误的。应该将css选择器从fade
更改为flip list
好吧,伙计们,这里有一个活生生的例子:Shuffle的转换可以与动画一起工作,而另一个fade可以不与动画一起工作animation@PaulVH所以你的问题是第一个按钮不会触发进入/离开转换?