案例：实现翻牌效果

项目效果如下：

 

具体步骤：

通过点击卡片，卡片会有水平翻转的效果，并且翻转过后显示对应的图片，当再次点击图片时，卡片则会翻转回来。

实现效果关键代码如下：

     
/*设置初始卡片的背景颜色*/
      .f>div:nth-child(odd){
          background-color: aqua;
      }
      .f>div:nth-child(even){
          background-color: red;
      }
      /*设置动画效果*/
    @keyframes xz {
        /*实现开始翻转，此时没有图片*/
        0%{
            transform: rotateY(0deg);
            background-image: url("");
        }100%{
            transform: rotateY(180deg);
        }
    }
    @keyframes xzr {
        /*翻转回去，从有图片到没有图片*/
        0%{
            transform: rotateY(180deg);
        }100%{
             transform: rotateY(0deg);
                     background-image: url("");
         }
    }
    /*设置动画的属性*/
    .xz{
        animation: xz 1s linear 1 forwards;
    }
    .xzr{
        animation: xzr 1s linear 1 forwards;

    }


<div id="app">
      <div class="f">
<!--       $event表示当前出发的事件   -->
          <div v-for="i in 6" @click="show($event,i)"></div>
      </div>
</div>

<script>
        new Vue({
            el:"#app",
            data: {
                list:[0,0,0,0,0,0],
            },
            methods:{
                show(e,i){
                    if(this.list[i-1]%2){
                        // e.target表示当前的元素对象
                        e.target.style.backgroundImage='url()'
                        e.target.className='xzr'
                        console.log(e)
                    }else{
                        e.target.style.backgroundImage='url(/randomImgC?'+i+')'
                        e.target.className='xz'
                    }
                    this.list[i-1]++
                }
            }
        })
</script>

后端主要代码如下：

String[] fileNames = new File("D:\\桌面\\aa\\beauty").list();
        String imgName = fileNames[(int) Math.floor(Math.random() * fileNames.length)];
        System.out.println("随机生成的文件名是"+imgName);
        ImgUtil.responseImg("D:\\桌面\\aa\\beauty/"+imgName,resp);

 

主要实现思路：

首先使用循环自动生成六个div，并且给他们初始设置背景颜色。通过点击他们，给他们添加类名实现旋转与更改背景图片，list用来记录每个div被点击的次数，控制给他们添加什么样的样式，传入的i用于给他们标记序号，由于后端传输的图片采用随机的方式，所以也保证图片不会改变同时也保证每个div中显示的图片不一样（通过给请求加一个参数的方式）。