鼠标点击控制div层展开收缩

最新推荐文章于 2022-06-25 11:46:34 发布

sunny.day

最新推荐文章于 2022-06-25 11:46:34 发布

阅读量2.2k

点赞数 1

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/yang__k/article/details/108696079

版权

前端开发专栏收录该内容

18 篇文章

订阅专栏

这篇博客介绍了如何使用CSS动画来控制div元素的展开和收缩效果。通过动态设置class，结合点击事件改变div的class属性，并在CSS中定义相应动画实现平滑过渡。文章提到了三种判断方法，包括三目运算符、对象式判断和在computed中的判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.展开收缩时使用的CSS动画完成的(此例子使用了第三种判断方法)

一.首先动态设置class：

1.三目运算符判断

<div class="hello" :class="isActive?'anmDiv':'aaa'"></div>

2.对象式判断

<div class="hello" :class="{ 'aaa': isActive, 'ccc': isSort }" />

3.在computed里面判断

     <div class="hello" :class="divStyle"></div>

<script>
export default {
  computed:{
      divStyle(){
        if(this.id===1) {
              return 'aaa'
        }else if(this.id===2){
              return 'ccc'
        }
     }
  },

二.在点击事件里设置改变div的class的属性及相应的操作

    changeWidth(){
      if(this.id===0 || this.id===2){
            this.id=1
      }else if(this.id===1){
            this.id = 2
      }
    }

三.在css里面设置动画

<style>
.hello{
width: 100px;
height: 200px;
background: #42b983;
}
.ccc{
transition: 3S;
}
.aaa{
width: 100%;
transition: 3S;
}
</style>

或者：

<style>
.hello{
width: 100px;
height: 200px;
background: #42b983;
}
.ccc{
animation:myfirst1 3s;
-moz-animation:myfirst1 3s; /* Firefox */
-webkit-animation:myfirst1 3s; /* Safari and Chrome */
-o-animation:myfirst1 3s; /* Opera */
}
@keyframes myfirst1 {
  from {width:100%;}
to {width:100px;}
}
.aaa{
width: 100%;
animation:myfirst 3s;
-moz-animation:myfirst 3s; /* Firefox */
-webkit-animation:myfirst 3s; /* Safari and Chrome */
-o-animation:myfirst 3s; /* Opera */
}
@keyframes myfirst
{
from {width:100px;}
to {width:100%;}
}
</style>

完整代码：

<template>
  <div class="hello1">
     <div class="hello" :class="isActive?'anmDiv':'aaa'"></div>  
     <button @click="changeWidth">change</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
       isActive: true,
    }
  },
  methods:{
    changeWidth(){
       if (this.isActive) {
         this.isActive = false
       } else {
         this.isActive = true
       }
    }
  }
}
</script>
<style>
.hello{
width: 100px;
height: 200px;
background: #42b983;
}
.anmDiv{
transition: 3S;

}
.aaa{
width: 100%;
transition: 3S;
}
</style>

运行结果：