ZUCC_移动应用交互设计VUE3.0_LAB7实现简易轮播图&&Animate.style动画库的使用

要求实现简易轮播图，同时用到组件之间的传递

具体难点可能在transition上，如果使用v-for来实现轮播图的话，要用到transition-group标签，如果用transition标签是不起作用的。

同时如果用animate.css库的话，还要进行npm包的导入，最终我还是选择了手写animate来实现动画效果，代码不难，直接上代码

作业代码：

父组件：

<template>
    <div>
            <imgTurn :imgs = "imgData"  ></imgTurn>  
    </div>
</template>

<script>
import { reactive, toRefs, computed ,watch,onMounted} from "vue";
import imgTurn from './lab7_2.vue'
    export default {
        components:{
            imgTurn
        },
        setup(){
            const state = reactive({
                imgData:[
                    require('@/assets/1.jpg'),
                    require('@/assets/2.jpg'),
                    require('@/assets/3.jpg'),
                    require('@/assets/4.jpg'),
                ]
            })

            return {
                ...toRefs(state)
            }
        }
    }
</script>

<style lang="stylus" scoped>

</style>

子组件：

<template>
  <div class="img" @mouseover="stop" @mouseout="play">
    <transition-group
      name = "slip"
    >
      <img
        v-for="(item, index) in imgSrc"
        :key="index"
        :src="item"
        v-show="currentIndex === index"
      />
    </transition-group>
    <div class="num">
      <ul class="num_ul">
        <li
          v-for="(item, index) in imgSrc"
          :class="{ active: currentIndex === index }"
        >
          {{ index + 1 }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, computed, watch, onMounted } from "vue";
export default {
  props: ["imgs"],
  setup(props) {
    const state = reactive({
      imgSrc: props.imgs,
      currentIndex: 0,
      timer: null,
    });
    onMounted(() => {
      play();
    });
    const autoPlay = () => {
      state.currentIndex += 1;
      state.currentIndex = state.currentIndex % state.imgSrc.length;
      console.log(state.currentIndex);
    };
    const play = () => {
      state.timer = setInterval(autoPlay, 3000);
    };
    const stop = () => {
      clearInterval(state.timer);
    };

    return {
      ...toRefs(state),
      play,
      stop,
    };
  },
};
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
}
.img {
  width: 400px;
  height: 600px;
  margin: 0 auto;
  position: relative;
}
img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: center;
  left: center;
}
ul {
  width: 200px;
  margin: 0 auto;
  display: flex;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-100px);
  text-align: center;
  justify-content: space-between;
}
li {
  display: block;
  width: 40px;
  height: 40px;
  float: left;
  list-style: none;
  margin-left: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid black;
  border-radius: 100%;
  text-align: center;
  line-height: 40px;
}
.active {
  background-color: pink;
  color: white;
}

.slip-enter-active{
    animation:flip1 0.5s linear
}
.slip-leave-active{
    animation:flip2 0.5s linear
}

@keyframes flip1{
    0%{
        transform: translateX(400px);
        opacity: 0;
    }
    50%{
        transform: translateX(200px);
        opacity: 0.5;
    }
    100%{
        transform:translateX(0px);
        opacity:1;
    }
}
@keyframes flip2{
    0%{
        transform: translateX(0px);
        opacity:1
    }
    50%{
        transform: translateX(-200px);
        opacity: 0.5;
    }
    100%{
        transform:translateX(-400px);
        opacity:0
    }
}
</style>

 实现效果：

 过渡效果大致是这样，懒得搞gif了

animate.style动画库的引入

官网如下：

Animate.css | A cross-browser library of CSS animations.

官网提供了两种使用方法，一种是npm导包还有一种是link的在线导入，但是可能是因为版本号的问题，这个在线导入我用了没有效果，所以建议还是npm一下

具体步骤：

1.打开vue的终端，运行

$ npm install animate.css --save

2.继续运行

$ yarn add animate.css

 这里可能会出现yarn找不到的问题

解决方案（打开cmd，运行：npm install -g yarn,紧接着会出现无法加载文件的问题，再以管理员身份运行powershell，输入：set-ExecutionPolicy RemoteSigned，选择Y，解决问题

set-ExecutionPolicy RemoteSigned
 
执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 http://go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”): Y

）

3.重新在vue执行yarn指令，待结束之后在main.js中引入

import { createApp } from 'vue' 
import App from './components/lab7_1.vue'  
import router from './router'   
import store from './store'
import 'animate.css/animate.min.css'   //引入动画库

createApp(App).use(store).use(router).mount('#app')

4.使用动画库的元素

<transition  enter-active-class="animate__animated animate__backInUp">
        <h3 v-if="isShow">xxxx</h3>
    </transition>

 注意：

"animate__animated animate__backInUp"中 animate__animated是动画库的前缀，必须要加，后面是动画效果，想用什么效果就去官网复制