Index
@page "/"
<div class="p-4">
<div class="mb-4">
<p>this pen uses <a target="__blank" href="https://github.com/aholachek/animate-css-grid">animate-css-grid</a>
</p>
<p>
If you use React, you might want to try out <a href="https://github.com/aholachek/react-flip-toolkit" target="__blank">react-flip-toolkit</a>
</p>
<button class="btn js-toggle-grid-gap">toggle <code>grid-gap</code></button>
<button class="btn js-toggle-grid-columns">toggle <code>grid-template-columns</code></button>
<p>click a card to toggle the <code>grid-column</code> and <code>grid-row </code>properties on the card</p>
</div>
<div class="grid grid--full mb-4">
<div class="card">
<div>
<img src="https://1h4hfe10xz8m3g3xkh2wb9lc-wpengine.netdna-ssl.com/blog/files/2015/08/thestocks-imagem.jpg" class="card__img"/>
</div>
</div>
<div class="card">
<div>
<img src="https://1h4hfe10xz8m3g3xkh2wb9lc-wpengine.netdna-ssl.com/blog/files/2015/08/thestocks-imagem.jpg" class="card__img"/>
</div>
</div><div class="card">
<div>
<img src="https://1h4hfe10xz8m3g3xkh2wb9lc-wpengine.netdna-ssl.com/blog/files/2015/08/thestocks-imagem.jpg" class="card__img"/>
</div>
</div>
<div class="card">
<div>
<img src="https://1h4hfe10xz8m3g3xkh2wb9lc-wpengine.netdna-ssl.com/blog/files/2015/08/thestocks-imagem.jpg" class="card__img"/>
</div>
</div>
<div class="card">
<div>
<img src="https://1h4hfe10xz8m3g3xkh2wb9lc-wpengine.netdna-ssl.com/blog/files/2015/08/thestocks-imagem.jpg" class="card__img"/>
</div>
</div>
<div class="card">
<div>
<img src="https://1h4hfe10xz8m3g3xkh2wb9lc-wpengine.netdna-ssl.com/blog/files/2015/08/thestocks-imagem.jpg" class="card__img"/>
</div>
</div>
<div class="card">
<div>
<img src="https://1h4hfe10xz8m3g3xkh2wb9lc-wpengine.netdna-ssl.com/blog/files/2015/08/thestocks-imagem.jpg" class="card__img"/>
</div>
</div>
<div class="card">
<div>
<img src="https://1h4hfe10xz8m3g3xkh2wb9lc-wpengine.netdna-ssl.com/blog/files/2015/08/thestocks-imagem.jpg" class="card__img"/>
</div>
</div>
</div>
<button class="btn js-add-card">add a card</button>
</div>
namespace BlazorFiddleProject
{
using Microsoft.AspNetCore.Components.Builder;
using Microsoft.Extensions.DependencyInjection;
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
}
public void Configure(IComponentsApplicationBuilder app)
{
app.AddComponent<App>("app");
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<title>BlazorFiddleProject</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
/* layout */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
grid-auto-rows: 12rem;
grid-gap: 16px;
grid-auto-flow: dense;
}
.grid--big-columns {
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.grid--big-gap {
grid-gap: 2.5rem;
}
/* styling */
.card--expanded {
grid-column: span 3;
grid-row: span 3;
}
.card--expanded > .card__img {
transform: scale(1.03);
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.fade-in {
opacity: 0;
animation: fadeIn 0.4s forwards;
animation-delay: 0.3s;
}
.card {
cursor: pointer;
overflow: hidden;
position: relative;
}
.card__img {
transition: transform 1s;
}
body {
background-color: #191919;
color: lightgray;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Helvetica Neue", Arial, sans-serif;
font-size: 1.1rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.p-4 {
padding: 1rem;
}
button {
padding: 0.75rem;
margin-right: 0.75rem;
background-color: #191919;
color: lightgray;
border: 1px solid lightgray;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: hsla(0, 0%, 83%, 0.05);
}
button:focus {
box-shadow: 0 0 0 3px #7396e4;
outline: none;
}
a {
font-weight: bold;
color: #7396e4;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
code {
color: #7396e4;
}
</style>
<style>
app { }
</style>
<script src="https://unpkg.com/animate-css-grid@1.4.0/dist/main.js"></script>
<script type="text/javascript">
window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 6000;
const grid = document.querySelector(".grid");
// event handler to toggle grid sizing
document
.querySelector(".js-toggle-grid-columns")
.addEventListener("click", () => grid.classList.toggle("grid--big-columns"));
document
.querySelector(".js-toggle-grid-gap")
.addEventListener("click", () => grid.classList.toggle("grid--big-gap"));
const addCard = () => {
return fetch(
`https://source.unsplash.com/random/${Math.floor(Math.random() * 1000)}`
)
};
// event handler to add a new card
document.querySelector(".js-add-card").addEventListener("click", addCard);
// event handler to toggle card size on click
grid.addEventListener("click", ev => {
let target = ev.target;
while (target.tagName !== "HTML") {
if (target.classList.contains("card")) {
target.classList.toggle("card--expanded");
return;
}
target = target.parentElement;
}
});
Promise.all([...Array(10).keys()].map(addCard)).then(() => {
animateCSSGrid.wrapGrid(grid, {
duration: 350,
stagger: 10,
onStart: elements =>
console.log(`started animation for ${elements.length} elements`),
onEnd: elements =>
console.log(`finished animation for ${elements.length} elements`)
});
});
</script>
</head>
<body>
<app>Loading...</app>
<script src="_framework/blazor.webassembly.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Add component
BlazorFiddle was updated from Blazor 0.7 to .NET 6.0.
Your old source code could not work. You need to upgrade to latest.