使用css做一个 点击按钮 控件先往左移动然后再往右移动(从左到右弹跳)。
css代码：
<style>
@keyframes leftToRight {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
0% {
transform: translateX(0px);
}
}
.animation {
animation: leftToRight 3s;
}
</style>
<body>
<div id="root"></div>
</body>
<script>
// 过渡，动画(如:从左到右弹跳)
// 创建 vue实例
const app = Vue.createApp({
data() {
return {
animate: {
animation: false
}
}
},
methods:{
handleClick() {
this.animate.animation = !this.animate.animation
}
},
template: `
<div>
<div :class="animate">
hello world!
</div>
<button @click="handleClick">
切换
</button>
</div>
`
});
const vm = app.mount('#root');
</script>
上面代码事件一个简单的css动画。
6501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
