当我悬停在边界上时,动画不会呈现
原始代码笔链接如下所示https://codepen.io/anon/pen/gvvxqq
我需要产品类CSS保留
如何在不影响产品类的情况下添加动画?
//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
我已经修复了它。template
标签有问题,我已将其删除并工作。
.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;
}
img{width:100%}
.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;
}
<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="https://colorlib.com/wp/wp-content/uploads/sites/2/store-free-template.jpg"
alt="Product Item"
/>
<spanclass="status">test OFF</span>
</a>
<div class="text pt-3 px-3">
<h3>test</h3>
<div class="d-flex">
<div class="pricing">
<p v-if="item.discounts.length != 0" class="price">
<span class="mr-2 price-dc">$5423</span>
<span class="price-sale">$5345</span>
</p>
<p v-else class="price">
<span>$435345</span>
</p>
</div>
</div>
</div>
</div>
</b-link>
</div>
如果要使用CodePen中使用CSS AS-I,则需要将整个块包裹在<section class="buttons">
中,并将最外部的<div>
更改为<button>
。我已经测试了这一点,并且可以按预期工作。
<template>
<section class="buttons">
<button class="item button draw">
<b-link @click="productDetail(item.productId)">
//
// custom element content
//
</b-link>
</button>
</section>
</template>