当我将鼠标悬停在边框上时，动画不渲染
原始码笔链接如下图https://codepen.io/anon/pen/GVvxqq
我需要保留产品类 css
如何在不影响产品类的情况下添加动画?
//HTML<模板><div class="item 按钮绘制"><b-link @click="productDetail(item.productId)"><div class="product"></b-link>
//CSS我需要保留产品类 css.产品{显示:块；宽度:100%；底边距:30px；@include media-breakpoint-down(md){底边距:30px；}.按钮 {背景:无；边框:0；box-sizing: 边框框；边距:1em；填充:1em 2em；框阴影:插入 0 0 0 2px #f45e61;颜色:#f45e61；字体大小:继承；字体粗细:700；位置:相对；垂直对齐:中间；}.button::before, .button::after {box-sizing:继承；内容: '';位置:绝对；宽度:100%；高度:100%；}.画 {过渡:彩色0.25s；}.draw::before, .draw::after {边框:2px 实心透明；宽度:0；高度:0；}.draw::before {顶部:0；左:0；}.draw::after {底部:0；右:0；}.draw:hover::before, .draw:hover::after {宽度:100%；高度:100%；}.draw:hover::before {边框顶部颜色:#60daaa；边框右颜色:#60daaa；过渡:宽度 0.25s 缓出，高度 0.25s 缓出 0.25s；}.draw:hover::after {边框底部颜色:#60daaa；边框左颜色:#60daaa；过渡:边框颜色 0s 缓出 0.5s，宽度 0.25s 缓出 0.5s，高度 0.25s 缓出 0.75s；}.img-prod{位置:相对；显示:块；溢出:隐藏；跨度状态{位置:绝对；顶部:10px；左:-1px；填充:2px 15px；颜色:$黑色；字体粗细:300；背景:$primary;}图片{-webkit-transform: scale(1.0);-moz 变换:比例(1.0)；-ms-transform: scale(1.0);-o-变换:比例(1.0)；变换:比例(1.0)；@include 过渡(.3s);}&:hover, &:focus{图片{-webkit-transform: scale(1.1);-moz 变换:比例(1.1)；-ms-transform: scale(1.1);-o-变换:比例(1.1)；变换:比例(1.1)；}}}只渲染边框颜色，不渲染动画
需要将整个块包裹在 <section class="buttons"> 并更改最外层的 <div> 到 如果你想使用 codepen 中的 CSS.我已经测试过了，它按预期工作.
<section class="buttons"><button class="item 按钮绘制"><b-link @click="productDetail(item.productId)">////自定义元素内容//</b-link></节>When I hover over the border, the animation does not render
The original code pen link is as shown belowhttps://codepen.io/anon/pen/GVvxqq
i need the product class css to remain
how do i add in the animation without affecting the product class?
//HTML
<template>
<div class="item button draw">
<b-link @click="productDetail(item.productId)">
<div class="product">
<a class="img-prod">
<img
class="img-fluid product-image"
:src="item.options[0].productImages[0].imageUrl"
alt="Product Item"
/>
<span v-if="item.discounts.length != 0" class="status">{{discountPercentageTag}}% OFF</span>
</a>
<div class="text pt-3 px-3">
<h3>{{item.productName}}</h3>
<div class="d-flex">
<div class="pricing">
<p v-if="item.discounts.length != 0" class="price">
<span class="mr-2 price-dc">${{item.price.toFixed(2)}}</span>
<span class="price-sale">${{discountPrice.toFixed(2)}}</span>
</p>
<p v-else class="price">
<span>${{item.price.toFixed(2)}}</span>
</p>
</div>
</div>
</div>
</div>
</b-link>
</div>
</template>
//CSS
i need the product class css to remain
.product{
display: block;
width: 100%;
margin-bottom: 30px;
@include media-breakpoint-down(md){
margin-bottom: 30px;
}
.button {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
}
.button::before, .button::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.draw {
transition: color 0.25s;
}
.draw::before, .draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover::before, .draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
.img-prod{
position: relative;
display: block;
overflow: hidden;
span.status{
position: absolute;
top: 10px;
left: -1px;
padding: 2px 15px;
color: $black;
font-weight: 300;
background: $primary;
}
img{
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-ms-transform: scale(1.0);
-o-transform: scale(1.0);
transform: scale(1.0);
@include transition(.3s);
}
&:hover, &:focus{
img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
}
}
Only the border colour is rendered but not the animation
You need to wrap the entire block in <section class="buttons"> and change the outermost <div> to <button> if you want to use the CSS as-is from the codepen. I have tested this and it works as expected.
<template>
<section class="buttons">
<button class="item button draw">
<b-link @click="productDetail(item.productId)">
//
// custom element content
//
</b-link>
</button>
</section>
</template>
这篇关于当我在边框上悬停时动画不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！